CSS3 анимация с градиентами

Question

Неужели нет способа анимировать градиентный фон с помощью CSS?

что-то вроде:

@-webkit-keyframes pulse {
  0% {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(196,222,242)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240)));
  }
  50% {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(222,252,255)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240)));
  }
  100% {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(196,222,242)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240)));
  }
}

Я знаю, для Safari 5.1+ и Chrome 10+ есть новый градиент-синтаксис, но сейчас я должен придерживаться старого для этого проекта.

Answer 1

Переходы пока не поддерживаются для градиентов webkit. Это в спецификации, но пока не работает.

(p.s., Если вы делаете только цветовые переходы - вы можете проверить -webkit-filters - которые делают анимацию!)

Обновление: переходы градиента, очевидно, работают в IE10 +

Answer 2

Поместите каждое изменение градиента на свой собственный слой. Абсолютная позиция им. Дайте каждому свой собственный набор ключевых кадров, синхронизированных друг с другом. В этих ключевых кадрах задайте непрозрачность для каждого слоя, в каждом ключевом кадре, с 1 и 0, смешанными между ключевыми кадрами.

Помните, что цвет контейнера будет вытекать, поэтому оберните слои в родительском элементе белым фоном.

http://jsfiddle.net/jSsZn/

Answer 3

Я решил проблему с помощью приложения: перед присвоением тегу.

Ссылка: http://codepen.io/azizarslan/pen/xsoje

CSS:

nav ul#menu li a {
    display: block;
    position: relative;
    z-index: 1;

    /* webkit gradient background */
    background: -webkit-linear-gradient(top, rgb(204, 0, 51), rgb(153, 0, 0));
}

nav ul#menu li a:before {
    width: 100%;
    height: 100%;
    display: block; 
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0;

    /* webkit gradient background */
    background: -webkit-linear-gradient(top, rgb(0, 156, 204), rgb(0, 111, 145));

    /* webkit transition */
    -webkit-transition: all 250ms linear;

    /* before hack */
    content: ".";
    text-indent: -99999px;
}

nav ul#menu li a:hover:before {
    opacity: 1;
}

Answer 4

Вы должны проверить наждачную бумагу CSS - это позволяет вам получить анимированные градиенты, но это не просто решение CSS. Css наждачная бумага заботится о межбраузерной визуализации градиента, и есть фрагмент javascript, который обрабатывает анимацию.

http://www.useragentman.com/blog/2010/04/05/cross-browser-animated-css-transforms-even-in-ie/

Answer 5

, если вы ищете переход вашего текста от сплошного цвета к градиенту.Просто анимируйте цвет текста RGBA, чтобы увидеть примененный к нему градиент фона.

Answer 6

@ Брайан, вместо использования новых html-элементов, используйте элементы sudo: before и: after. Расположите основной элемент как относительный, затем установите псевдоэлементы как абсолютные с 0 для верхнего, левого, правого и нижнего.

HTML:

<div></div>

CSS:

div {
    width: 200px;
    height: 200px;
    position: relative;
}

div::before, div::after {
    display: block;
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}

Добавьте ваши ключевые кадры и градиенты к элементу div и псевдоэлементам, используя прозрачность. Используйте z-index, чтобы контролировать, что поверх чего.