2012-02-17 4 views
0

Можно создать дубликат:
CSS3 animation with gradientsВозможно ли оживить непрозрачность градиента в CSS3?

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

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

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

+0

http://stackoverflow.com/questions/5654510/css3-animation-with-gradients – Aaron

ответ

0

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

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

+0

Thank вы за свой ответ :-) Я помещаю градиент в: перед псевдоэлементом, а затем изменяя его непрозрачность, как вы сказали. Он работает в FireFox, но почему-то не работал в Chrome. Не знаю, из-за этого это псевдоэлемент или что-то, но это еще один вопрос, и я должен буду взглянуть на это, когда у меня будет время. –

+0

Есть целая куча ошибок с псевдоэлементами. Кажется, что куча эффектов CSS не работает должным образом с ними. Я бы предложил поместить переход на родительский элемент, а не непосредственно на псевдоэлемент (или обернуть псевдоэлемент в div или span и переход, который) –

+0

Спасибо за совет, я собираюсь попробовать это. –