Ejemplo
Crea un elemento se mueve gradualmente hacia abajo 200 píxeles:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
/* Standard syntax */
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
Inténtalo tú mismo " Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
La regla @keyframes especifica el código de animación.
La animación se crea cambiando gradualmente de un conjunto de estilos CSS a otro.
Durante la animación, puede cambiar el conjunto de estilos CSS muchas veces.
Especificar cuando el cambio de estilo ocurrirá en tanto por ciento, o con las palabras clave "from" y "to" , que es el mismo que el 0% y el 100%. 0% es el comienzo de la animación, 100% es cuando la animación se ha completado.
Consejo: Para un mejor soporte de los navegadores, siempre se debe definir tanto el 0% y el 100% de los selectores.
Note: Utilice las propiedades de animación para controlar la apariencia de la animación, y también para obligar a la animación para los selectores.
Soporte para el navegador
Los números de la tabla especifica la primera versión del navegador que es totalmente compatible con la regla.
Los números seguidos por -webkit-, -moz- o -O- especifican la primera versión que funcionaba con un prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- | 9.0 4.0 -webkit- | 30.0 15.0 -webkit- 12.0 -o- |
sintaxis CSS
@keyframesanimationname {keyframes-selector {css-styles;}}Valores de propiedad
| Valor | Descripción |
|---|---|
| animationname | Necesario. Define el nombre de la animación. |
| keyframes-selector | Necesario. Porcentaje de la duración de la animación. Los valores legales: 0-100% Note: Puede tener muchos fotogramas clave-selectores en una animación. |
| css-styles | Necesario. Una o más propiedades legales de estilo CSS |
Más ejemplos
Ejemplo
Añadir muchos selectores de fotogramas clave en una animación:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
Inténtalo tú mismo " Ejemplo
Cambiar muchos estilos CSS en una animación:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
Inténtalo tú mismo " Ejemplo
Muchos selectores de fotogramas clave con gran variedad de estilos CSS:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
Inténtalo tú mismo " Páginas relacionadas
CSS3 tutorial: CSS3 Animaciones