Существует ли анимационное свойство перехода для css-фильтров?

Я пытаюсь анимировать фильтры CSS, но не могу найти никакой информации о правильных свойствах перехода. Что они?

Вот пример: http://jsbin.com/onijim/3/

Ответы

Ответ 1

-webkit-transition : -webkit-filter 500ms linear

работает в webkit. Я не знаю о поддержке фильтра в FF или Opera.

Я не уверен, что полностью понимаю ваш вопрос.

Ответ 2

Это то, что я использую. Для Mozilla второй работает для меня, но в моих источниках я нашел его с -moz-префиксом, поэтому не мешает сохранить оба.

-webkit-transition: 1s -webkit-filter linear;
-moz-transition: 1s -moz-filter linear;
-moz-transition: 1s filter linear;
-ms-transition: 1s -ms-filter linear;
-o-transition: 1s -o-filter linear;
transition: 1s filter linear, 1s -webkit-filter linear;

Ответ 3

В последних версиях Chrome, поддерживающих transition без префикса -webkit-, если вы используете transition-property (без сокращения transition) и таких свойств, как filter, которому по-прежнему нужен префикс -webkit-, вам нужно смешать префикс и префикс код:

transition-property: width, left, transform, box-shadow, filter, -webkit-filter;

Обратите внимание, что свойство filter повторяется -webkit-filter. Это необходимо для браузеров, которые не используют префикс, например Firefox, который в этом случае игнорируется -webkit-filter.