Regla CSS @keyframes
Ejemplo
Haz que un elemento se mueva gradualmente 200px hacia abajo:
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La @keyframesregla 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.
Especifique cuándo ocurrirá el cambio de estilo en porcentaje, o con las palabras clave "desde" y "hasta", que es lo mismo que 0% y 100%. 0% es el comienzo de la animación, 100% es cuando la animación está completa.
Sugerencia: para obtener la mejor compatibilidad con el navegador, siempre debe definir los selectores 0% y 100%.
Nota: Utilice las propiedades de animación para controlar la apariencia de la animación y también para vincular la animación a los selectores.
Nota: La regla !important se ignora en un fotograma clave (consulte el último ejemplo en esta página).
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la regla.
Los números seguidos de -webkit-, -moz- o -o- especifican la primera versión que funcionó con un prefijo.
| Property | |||||
|---|---|---|---|---|---|
| @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
@keyframes animationname {keyframes-selector {css-styles;}}
Valores de propiedad
| Value | Description |
|---|---|
| animationname | Required. Defines the name of the animation. |
| keyframes-selector | Required. Percentage of the animation duration. Legal values: 0-100% Note: You can have many keyframes-selectors in one animation. |
| css-styles | Required. One or more legal CSS style properties |
Más ejemplos
Ejemplo
Agregue muchos selectores de fotogramas clave en una animación:
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
Ejemplo
Cambia muchos estilos CSS en una animación:
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
Ejemplo
Muchos selectores de fotogramas clave con muchos estilos CSS:
@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;}
}
Ejemplo
Nota: La regla !important se ignora en un fotograma clave:
@keyframes myexample
{
from {top: 0px;}
50% {top: 100px !important;} /* ignored
*/
to {top: 200px;}
}
páginas relacionadas
Tutorial CSS: Animaciones CSS