Declaración y uso básicos
@-webkit-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-moz-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-o-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) )#box ( -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */ -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */ -o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */ animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */ )En aras de la brevedad, el resto del código en esta página no usará ningún prefijo, pero el uso en el mundo real debe usar todos los prefijos de proveedores anteriores.
Varios pasos
@keyframes fontbulger ( 0% ( font-size: 10px; ) 30% ( font-size: 15px; ) 100% ( font-size: 12px; ) ) #box ( animation: fontbulger 2s infinite; )Si una animación tiene las mismas propiedades de inicio y final, una forma de hacerlo es separar con comas los valores 0% y 100%:
@keyframes fontbulger ( 0%, 100% ( font-size: 10px; ) 50% ( font-size: 12px; ) )O bien, siempre puede decirle a la animación que se ejecute dos veces (o cualquier número par de veces) e indicarle la dirección alternate.
Llamar a la animación de fotogramas clave con propiedades independientes
.box ( animation-name: bounce; animation-duration: 4s; /* or: Xms */ animation-iteration-count: 10; animation-direction: alternate; /* or: normal */ animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */ animation-fill-mode: forwards; /* or: backwards, both, none */ animation-delay: 2s; /* or: Xms */ )Animación Taquigrafía
Simplemente separe con espacio todos los valores individuales. El orden no importa, excepto cuando se usan tanto la duración como el retraso, deben estar en ese orden. En el siguiente ejemplo, 1 s = duración, 2 s = retraso, 3 = iteraciones.
animation: test 1s 2s 3 alternate backwardsCombinar transformación y animación
@keyframes infinite-spinning ( from ( transform: rotate(0deg); ) to ( transform: rotate(360deg); ) )Varias animaciones
Puede separar los valores por comas para declarar varias animaciones en un selector.
.animate-this ( animation: first-animation 2s infinite, another-animation 1s; )Pasos()
La función steps () controla exactamente cuántos fotogramas clave se renderizarán en el intervalo de tiempo de la animación. Digamos que declaras:
@keyframes move ( from ( top: 0; left: 0; ) to ( top: 100px; left: 100px; ) )Si usa los pasos (10) en su animación, se asegurará de que solo ocurran 10 fotogramas clave en el tiempo asignado.
.move ( animation: move 10s steps(10) infinite alternate; )Las matemáticas funcionan muy bien allí. Cada segundo, el elemento se moverá 10px hacia la izquierda y 10px hacia abajo, hasta el final de la animación, y luego nuevamente en reversa para siempre.
Esto puede ser excelente para la animación de hojas de sprites como esta demostración de simurai.
Soporte del navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 4 * | 5 * | 10 | 12 | 5,1 * |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 4 * | 6.0-6.1 * |
Más recursos
- Documentos de MDN
- MDN: uso de animación CSS
- ¿Puedo usar? Compatibilidad con navegador
- VIDEO: Introducción a las animaciones CSS