ASultonov
@ASultonov

Почему в Mozill'е не работает transition: filter?

Сейчас в интернете нашел кроссплатформенное решение для filter: grayscale. Все работает хорошо, все отлично. Но ровно до тех пор, пока не захочется добавить свойство transition: filter. Потому что это свойство в FF вообще не работает. Вот сам код:
.grayscale {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: url(../svg/grayscale.svg#grayscale); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */
  filter: grayscale(100%);

  -webkit-transition: -webkit-filter .5s, filter .5s;
  -moz-transition: -moz-filter .5s, filter .5s;
  -o-transition: -o-filter .5s, filter .5s;
  transition: -webkit-filter .5s, -moz-filter .5s, -ms-filter .5s, -o-filter .5s, filter .5s;
}

.grayscale:hover {
  -webkit-filter: grayscale(0);
  -moz-filter: grayscale(0);
  -ms-filter: grayscale(0);
  -o-filter: grayscale(0);
  filter: none;
}

Кажется это из-за svg. Кто-нибудь знает как решить проблему?
  • Вопрос задан
  • 3210 просмотров
Решения вопроса 1
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
Для полностью оттенков серого

-webkit-filter:grayscale(1);
filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='saturate' values='0'/></filter></svg>#grayscale");


Для цветной версии:

-webkit-filter:grayscale(0);
filter:none;


Строки для -webkit-filter просто для ориентации. transition должен работать.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы