Ejemplo de CSS @keyframes

El @keyframes CSS at-rule controla los pasos intermedios en una secuencia de animación CSS definiendo estilos para fotogramas clave (o puntos de referencia) a lo largo de la secuencia de animación. Esto le da más control sobre los pasos intermedios de la secuencia de animación que las transiciones.

Sintaxis

@keyframes slideinfromtransform:translateX(0%);totransform:translateX(100%);

Valores

Un nombre que identifica la lista de fotogramas clave. Debe coincidir con la producción del identificador en la sintaxis CSS.

from

Un desplazamiento inicial de 0%.

to

Un desplazamiento final de 100%.

Un porcentaje del tiempo a lo largo de la secuencia de animación en el que debería ocurrir el fotograma clave especificado.

Descripción

JavaScript puede acceder al @keyframes at-rule con la interfaz del modelo de objetos CSS CSSKeyframesRule.

Para utilizar fotogramas clave, cree un @keyframes regla con un nombre que luego es utilizado por el animation-name propiedad para hacer coincidir una animación con su declaración de fotograma clave. Cada @keyframes La regla contiene una lista de estilos de selectores de fotogramas clave, que especifican porcentajes a lo largo de la animación cuando se produce el fotograma clave, y un bloque que contiene los estilos para ese fotograma clave.

Puede enumerar los porcentajes de fotogramas clave en cualquier orden; se manejarán en el orden en que deberían ocurrir.

Listas de fotogramas clave válidas

Si una regla de fotogramas clave no especifica el estado inicial o final de la animación (es decir, 0%/from y 100%/to), los navegadores utilizarán los estilos existentes del elemento para los estados de inicio / fin. Esto se puede usar para animar un elemento desde su estado inicial y viceversa.

Las propiedades que no se pueden animar en las reglas de fotogramas clave se ignoran, pero las propiedades admitidas seguirán estando animadas.

Resolución de duplicados

Si existen varios conjuntos de fotogramas clave para un nombre dado, se utiliza el último encontrado por el analizador. @keyframes las reglas no se distribuyen en cascada, por lo que las animaciones nunca derivan fotogramas clave de más de un conjunto de reglas.

Si se duplica un desplazamiento de tiempo de animación dado, todos los fotogramas clave en el @keyframes La regla para ese porcentaje se utiliza para ese marco. Hay una cascada dentro de un @keyframes regla si varios fotogramas clave especifican los mismos valores de porcentaje.

Cuando las propiedades quedan fuera de algunos fotogramas clave

Las propiedades que no se especifican en cada fotograma clave se interpolan si es posible; las propiedades que no se pueden interpolar se eliminan de la animación. Por ejemplo:

@keyframes identifier0%top: 0;left: 0;30%top: 50px;68%, 72%left: 50px;100%top: 100px;left: 100%;

Aquí el top la propiedad anima usando el 0%, 30%, y 100% fotogramas clave y left anima usando el 0%, 68%, 72% y 100% fotogramas clave.

Cuando un fotograma clave se define varias veces

Si un fotograma clave se define varias veces, pero no todas las propiedades afectadas están en cada fotograma clave, se consideran todos los valores especificados en estos fotogramas clave. Por ejemplo:

@keyframes identifier0%top: 0;50%top: 30px;left: 20px;50%top: 10px;100%top: 0;

En este ejemplo, en el 50% fotograma clave, los valores utilizados son top: 10px y left: 20px.

Los fotogramas clave en cascada son compatibles a partir de Firefox 14.

!important en un fotograma clave

Declaraciones en un fotograma clave calificado con !important son ignorados.

@keyframes important1frommargin-top: 50px;50%margin-top: 150px !important;/* ignored */tomargin-top: 100px;@keyframes important2frommargin-top: 50px;margin-bottom: 100px;tomargin-top: 150px !important;/* ignored */margin-bottom: 50px;

Sintaxis formal

@keyframes  
  
where 
 = |
 = +
where 
 = # 
  
where 
 = from | to |

Ejemplos de

Ejemplos de animación CSS

Consulte Uso de animaciones CSS para ver ejemplos.

Especificaciones

Compatibilidad del navegador

Ver también

• Usando animaciones CSS
• AnimationEvent