Ejemplo
Asociación de una animación a un <div> elemento, utilizando la propiedad rápida:
div
{
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
Inténtalo tú mismo " Definición y Uso
La propiedad de animación es una propiedad resumida para ocho de las propiedades de la animación:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
Note: Siempre especifique la propiedad de animación duración, de lo contrario la duración es 0, y nunca se jugó.
| Valor por defecto: | none 0 ease 0 1 normal none running |
|---|---|
| Heredado: | no |
| animatable: | no. Read about animatable |
| Versión: | CSS3 |
| la sintaxis de JavaScript: | object .style.animation="mymove 5s infinite" Try it |
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos por -webkit-, -moz-, o -O- especifican la primera versión que funcionaba con un prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| animation | 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
animation:name duration timing-function delay iteration-count
direction fill-mode play-state;Valores de propiedad
| Valor | Descripción |
|---|---|
| animation-name | Especifica el nombre del fotograma clave que desea enlazar con el selector |
| animation-duration | Especifica cuántos segundos o milisegundos una animación tarda en completar |
| animation-timing-function | Especifica la curva de velocidad de la animación |
| animation-delay | Especifica un retraso antes de que la animación se iniciará |
| animation-iteration-count | Especifica el número de veces una animación se debe jugar |
| animation-direction | Especifica si la animación debe jugar en reversa en ciclos alternos |
| animation-fill-mode | Especifica los valores que se aplican por la animación fuera del tiempo que se está ejecutando |
| animation-play-state | Especifica si la animación se está ejecutando o está en pausa |
| initial | Establece esta propiedad a su valor por defecto. Lea acerca inicial |
| inherit | Hereda esta propiedad de su elemento padre. Lee sobre heredar |
Páginas relacionadas
CSS3 tutorial: CSS3 Animaciones
Referencia HTML DOM: animation property