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

Нет ли способа анимации градиентного фона с 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+ существует новый синтаксис градиента, но на данный момент я должен придерживаться старого для этого проекта.

Ответы

Ответ 1

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

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

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

Ответ 2

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

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

http://jsfiddle.net/jSsZn/

Ответ 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;
}

Ответ 4

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

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

Ответ 5

@Brian вместо использования новых элементов html, используйте sudo elements: 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 для управления, который находится на вершине.

Ответ 6

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

CSS

.button {
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#fe046e), color-stop(100%,#a02ed4));
    -webkit-background-clip: text;
    color: rgba(255,255,255,1);

    -webkit-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
}

.button:hover {
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#fe046e), color-stop(100%,#a02ed4));
    -webkit-background-clip: text;
    color: rgba(255,255,255,0);
}