NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

Propiedad CSS : animation

30 de Diciembre del 2020 por Josep Antoni Bover. 0 visitas, 0 comentarios, 0 votos
Categorías : CSS.
La web está en segundo plano, animación en pausa.
Cargando animación...

Esta propiedad se puede utilizar para especificar todas las propiedades de la animación, excepto la propiedad "animation-play-state".

Podemos especificar hasta 6 propiedades de la animación con esta propiedad : animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, y animation-direction.


Sintaxis

animation NombreAnimación Duración FunciónTiempo Retraso Iteraciones Dirección
NombreAnimación Especifica el nombre del @keyframe que queremos asociar.
Duración Duración en segundos (s) o en milisegundos (ms) de la animación.
FunciónTiempo Especifica la curva de velocidad que se va a usar, que puede ser :
linear La misma velocidad para toda la animación
ease La animación empieza lenta y termina más lenta, pero va rápida durante la mitad. Por defecto
ease-inLa animación empieza lenta
ease-outLa animación termina lenta
ease-in-outLa animación empieza y termina lenta
cubic-bezier(v, v, v, v) Define tus propios valores en la función cubic-bezier (los valores van de 0 a 1)
Retraso Especifica el tiempo que tarda en arrancar la animación.
Iteraciones Especifica el numero de veces que la animación debe ser reproducida. (puedes especificar "infinite")
Dirección Especifica si la animación se alterna/invierte al llegar al final. Valores : "normal" (por defecto), o "alternate" (invertir).


Código de ejemplo



Compatibilidad

Esta propiedad es soportada por todos los navegadores compatibles con CSS3.

Soportado a partir de la versión 2 con el prefijo -webkit-
Soportado a partir de la versión 16
Soportado a partir de la versión 15 con el prefijo -webkit-
Soportado a partir de la versión 4 con el prefijo -webkit-
Soportado a partir de la versión 10

Documento modificado por última vez : 30/12/2020
Ejemplo modificado por última vez : 30/12/2020

Enlaces relacionados