Можно ли анимировать непрозрачность градиента в CSS3?

Возможный дубликат:
CSS3-анимация с градиентами

У меня есть элемент с радиальным градиентом, код выглядит следующим образом:

background: radial-gradient(center, ellipse cover,  rgba(255,255,255,0.65) 0%,rgba(255,255,255,0) 100%);

Я хочу сделать переход от невидимого к видимому, что, как я полагаю, будет достигнуто путем изменения альфа-значения первого значения rgba. Я просто не знаю, как должен выглядеть синтаксис. Или это вообще возможно в CSS3?


css css-transitions
person Teemu Pärssinen    schedule 17.02.2012    source источник
comment
stackoverflow.com/questions/5654510/   -  person Aaron    schedule 18.02.2012

Ответы (1)


arrow_upward
0
arrow_downward

Градиентные цвета еще не анимируются/переходятся ни в одном браузере, хотя в спецификации сказано, что они должны быть.

Чтобы получить этот эффект, вам нужно добавить отдельное свойство «непрозрачность», которое переходит от 0 к 1.

person Michael Mullany    schedule 18.02.2012
comment
Спасибо за ваш ответ :-) Я добавил градиент: перед псевдоэлементом, а затем изменил его непрозрачность, как вы сказали. Он работает в FireFox, но по какой-то причине не работает в Chrome. Не знаю, из-за того ли это, что это псевдоэлемент или что-то еще, но это совсем другой вопрос, и мне придется взглянуть на него, когда у меня будет время. - person Teemu Pärssinen; 20.02.2012
comment
Есть целая куча багов с псевдоэлементами. Кажется, что куча CSS-эффектов не работает с ними должным образом. Я бы предложил поместить переход в родительский элемент, а не непосредственно в псевдоэлемент (или обернуть псевдоэлемент в div или span и выполнить переход) - person Michael Mullany; 20.02.2012
comment
Спасибо за совет, я собираюсь попробовать это. - person Teemu Pärssinen; 21.02.2012