keyframes - css animation hover

Animación CSS3 con degradados

Question

¿Realmente no hay forma de animar un gradiente de fondo con CSS?

algo como:

@-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)));
  }
}

Lo sé, para Safari 5.1+ y Chrome 10+ hay una nueva sintaxis de degradado, pero por ahora, tengo que seguir con la anterior para este proyecto.

Answer 1

@Brian en lugar de usar nuevos elementos html, use los elementos sudo: before y: after. Coloque el elemento principal como relativo, luego coloque los pseudo elementos como absolutos con 0 para arriba, izquierda, derecha e inferior.

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;
}

Agregue sus fotogramas clave y degradados al div y los pseudo elementos utilizando opacidad. Use z-index para controlar cuál está encima de cuál.

Answer 2

Debería echarle un vistazo al papel de lija css, esto le permite obtener degradados animados, pero no es una solución pura de CSS. El papel de lija de Css se ocupa de la representación del degradado en varios navegadores, y hay una parte de javascript que maneja la animación.

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

Answer 3

Las transiciones aún no son compatibles con los degradados de webkit. Está en la especificación, pero aún no funciona.

(ps si solo está haciendo transiciones de color, es posible que desee comprobar los filtros de "webkit "que sí se animan).

Actualización: las transiciones de gradiente aparentemente funcionan en IE10 +

Answer 4

Pon cada variación de degradado en su propia capa. Posición absoluta ellos. Proporcione a cada uno su propio conjunto de fotogramas clave sincronizados entre sí. En esos fotogramas clave, defina la opacidad para cada capa, en cada fotograma clave, con 1 y 0 mezclados entre fotogramas clave.

Tenga en cuenta que el color del contenedor se desbordará, por lo tanto, envuelva las capas en un elemento primario con un fondo blanco.

http://jsfiddle.net/jSsZn/

Answer 5

Resolví el problema mediante la aplicación: antes de la atribución a la etiqueta a.

Enlace: 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 6

si está buscando una transición de su texto de un color sólido a un degradado. Simplemente anima el color rgba del texto para revelar el degradado de fondo aplicado en él.

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);
}