Animaciones con @keyframes
Las transiciones son fantásticas para animaciones sencillas. Para cosas más complicadas tenemos las animaciones CSS3 especificadas en el módulo CSS Animations
Veamos un ejemplo: a continuación queremos animar al elemento .animable
. A decir la verdad será una animación básica que, en solo dos fotogramas, cambiará el color de fondo. Para esto designamos el nombre ( animation-name: cambiarColor
) y la duración de la animación ( animation-duration: 5s
). La tercera regla ( animation-iteration-count: infinite
) nos dice que la animación se repite indefinidamente.
.animable { animation-name: cambiarColor; animation-duration: 5s; animation-iteration-count: infinite; }
Necesitamos utilizar prefijos para que la animación funcione correctamente en varios navegadores.
.animable { -webkit-animation-name: cambiarColor; animation-name: cambiarColor; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }
Claro que si queremos ser precavidos podemos utilizar también –moz-
y –o-
, aunque el soporte actual de las animaciones nos permite utilizar solo –webkit-
. Después de todo, utilizamos las animaciones para mejorar la experiencia del usuario, y la falta de animación no tiene que interferir con la funcionalidad.
@keyframes
Ya sabemos que una animación se compone de una secuencia de fotogramas ( keyframes ). Veamos cómo definirlas en el CSS3.
La sintaxis utilizada es muy parecida a la de @media-query
o de @font-face
.
Una regla que define las fotogramas a utilizar empieza con la palabra clave @keyframes
seguida por el nombre de la animación: cambiarColor
en este caso. A continuación entre llaves {}
aparecen las fotogramas.
@keyframes cambiarColor {
/*las fotogramas para cambiarColor */
}
Durante la animación el color de fondo del elemento .animable
cambiará de amarillo ( #ffffef
) a blanco ( #fff
). La animación cuenta con dos fotogramas: al principio ( 0%
) y al final ( 100%
) de los 5 segundos de duración.
@keyframes cambiarColor { 0% { background-color: #ffffef;} 100% { background-color: #fff;} }
¡Ojo!: los selectores de las fotogramas 0%
y 100%
son porcentajes y tienen que llevar el símbolo %
. También podemos utilizar como selectores las palabras clave from
( desde ) en lugar de 0%
y to
( hasta ) en lugar de 100%
.
@keyframes cambiarColor { from { background-color: #ffffef;} to { background-color: #fff;} }
Y de nuevo: necesitamos utilizar prefijos para que la animación funcione correctamente en varios navegadores.
@-webkit-keyframes cambiarColor {
0% { background-color: #ffffef;}
100% { background-color: #fff; }
}
@keyframes cambiarColor {
0% { background-color: #ffffef;}
100% { background-color: #fff;}
}
.animable {
width: 250px;
height: 150px;
border: 1px solid #d9d9d9;
margin: 0 auto;
-webkit-animation-name: cambiarColor;
animation-name: cambiarColor;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes cambiarColor {
0% {
background-color: #ffffef;
}
100% {
background-color: #fff;
}
}
@keyframes cambiarColor {
0% {
background-color: #ffffef;
}
100% {
background-color: #fff;
}
}
table.cheatsheet.referencia tr th {
background-color: #CC3366;
color: #fff;
}
Otras propiedades de las animaciones CSS3
Propiedad | Sintaxis | Descripción |
---|---|---|
@keyframes | @keyframes nombre_animacion { keyframes-selector {css-styles;} } |
Con @keyframes podemos crear animaciones |
animation | animation: name duration timing-function delay iteration-count direction fill-mode play-state; | Establece todas las propiedades de la animación en una sola declaración abreviada |
animation-delay | animation-delay: tiempo en segundos o milisegundos; | Define cuando la animación se iniciará |
animation-direction | animation-direction: normal | reverse | alternate | alternate-reverse; | Define si la animación debe reproducirse hacia atrás o en ciclos alternos |
animation-duration | animation-duration: tiempo en segundos o milisegundos; | Define el número de segundos o milisegundos que la animación tarda en realizarse |
animation-fill-mode | animation-fill-mode: none|forwards|backwards|both; | Especifica como debe comportarse el elemento cuando la animación esta en pausa. Si animation-fill-mode: none , el elemento vuelve al punto de partida.
Si animation-fill-mode: forwards el elemento se queda en el punto donde acabó la animación.
|
animation-iteration-count | animation-iteration-count: n veces | infinite; | Define cuántas veces hay que reproducir la animación. |
animation-name | animation-name: nombre_animacion | none; | Especifica un nombre para la animación de @keyframes |
animation-timing-function | animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | Especifica la curva de velocidad de la animación |
animation-play-state | animation-play-state: paused | running; | El estado de la animación. Especifica si la animación está en ejecución o en pausa |
La declaración abreviada
La declaración abreviada establece todas las propiedades de la animación en una sola declaración, y tiene este aspecto:
animation: nombre duración función-de-temporizador demora número-de-iteraciones dirección fill-mode estado-de-la-animación;
Un caso práctico
Una de las más útiles aplicaciones de @keyframes
es "la técnica del amarillo desvaneciente" ( The Yellow Fade Technique ). Se trata de una forma elegante de atraer la atención del usuario hacia una cierta zona en la página. Veamos cómo.
Todos sabemos cómo enlazar a un elemento con un id
especificado dentro de una página ( el atributo name
ya no es compatible con HTML5 ).
<p id="arriba">Arriba</p>
. . . .
<a href="#arriba">Ir arriba</a>
El elemento enlazado es un elemento de destino, o un elemento "target". Podemos dar formato al elemento de destino utilizando el selector :target
de CSS3.
:target { border: 1px solid #d9d9d9; background-color:#FFC; }
En el siguiente ejemplo utilizamos el selector :target
para animar el fondo ( background ) y el borde del <article>
enlazado.
El html tiene una estructura básica: hay 6 enlaces <a>
hacia sendos artículos <article>
situados en la página. Los artículos tienen asignados un id
para poder ser enlazados. Al hacer clic sobre uno de los enlaces el usuario será dirigido hacia el articulo de destino.
. . .
. . .
. . .
. . .
. . .
. . .
En el CSS utilizamos el selector :target
para cambiar el color de fondo del <article>
enlazado a amarillo ( #ffffef
). Utilizando @keyframe
hacemos que el color desvanezca en una animación que dura 2 segundos. La propiedad animation-timing-function
especifica la curva de velocidad de la animación a través de una función de temporización ( en este caso ease-out
).
Lea más acerca de funciones de temporización.
article:target{
-webkit-animation-name: articleTarget;
animation-name: articleTarget;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
@-webkit-keyframes articleTarget {
0% { background-color: #ffffef; border-color:#b0b0b0;}
100% { background-color: #fff; border-color:#ededed; }
}
@keyframes articleTarget {
0% { background-color: #ffffef; border-color:#b0b0b0;}
100% { background-color: #fff; border-color:#ededed;}
}
DEMO: La técnica del amarillo desvaneciente - un ejemplo práctico