CSS3 Animaciones (Animations)

CSS3La función de animación permite crear animaciones de clave帧.

Crear CSS3animación

En el capítulo anterior, ya conoces cómo realizar animaciones simples, como a través de CSS3La función de transición anima las propiedades de un valor a otro. Sin embargo, CSS3La transición prácticamente no puede controlar cómo la animación cambia con el tiempo.

CSS3La animación avanza más allá de la animación basada en fotogramas clave, permitiéndole especificar el cambio de un atributo CSS en el tiempo como un conjunto de fotogramas clave, por ejemplo, animaciones Flash.

Crear una animación CSS es un proceso de dos pasos, como se muestra en el siguiente ejemplo:

• El primer paso para construir una animación CSS es definir cada fotograma clave y usar la declaración de fotogramas clave para nombrar la animación.

• El segundo paso es usar animation-La propiedad name se refiere al fotograma clave por nombre y se agrega animation-duration y otros atributos opcionalesAtributos de animaciónpara especificar el comportamiento de la animación.

Sin embargo, no es necesario definir las reglas de fotogramas clave antes de referenciar o aplicar las reglas de fotogramas clave. El siguiente ejemplo le mostrará cómo usar CSS3La función de animación<div>animación que cambia la posición horizontal de un cuadro desde una ubicación a otra.

.box {
　　　　width:　50px;
　　　　height:　50px;
　　　　background: rojo;
　　　　position: relative;
　　　　/*　Chrome, Safari, Opera　*/
　　　　-webkit-animation-name: moveit;
　　　　-webkit-animation-duration:　2s;
　　　　
　　　　animation-name: moveit;
　　　　animation-duration:　2s;
}
　
/*　Chrome, Safari, Opera　*/
@-webkit-keyframes moveit {
　　　　from {left: 0;}
　　　　to {left:　50%;}
}
　
@keyframes moveit {
　　　　from {left: 0;}
　　　　to {left:　50%;}
}

Debe especificar al menos dos propiedades animation-name y animation-duration (mayor que 0), para que se pueda ejecutar la animación. Sin embargo, todos los otrosAtributos de animaciónson opcionales, ya que sus valores predeterminados no impiden que se realice la animación.

definir fotogramas clave

Los fotogramas clave se utilizan para especificar los valores de los atributos de animación en cada etapa de la animación. Los fotogramas clave se definen utilizando reglasReglas CSS-Los especificados por @keyframes. Los selectores de reglas de fotogramas clave comienzan con un porcentaje (%) o un nombre de clave desde (igual a 0％) hasta (igual a100％）。 Los selectores se utilizan para especificar la ubicación de construcción de los fotogramas clave durante el proceso de animación.

Los porcentajes representan el porcentaje de duración de la animación, 0％ representa el punto de partida de la animación,100％ representa el final,50％ representa el punto medio, etc. Esto significa2s de la animación50％ del fotograma clave se convertirá en el1s。

.box {
　　　　width:　50px;
　　　　height:　50px;
　　　　margin:　100px;
　　　　background: rojo;
　　　　position: relative;
　　　　left: 0;
　　　　/*　Chrome, Safari, Opera　*/
　　　　-webkit-animation-name: shakeit;
　　　　-webkit-animation-duration:　2s;
　　　　
　　　　animation-name: shakeit;
　　　　animation-duration:　2s;
}
　
/*　Chrome, Safari, Opera　*/
@-webkit-keyframes shakeit {
　　　　12.5% {left:　-50px;}
　　　　25% {left:　50px;}
　　　　37.5% {left:　-25px;}
　　　　50% {left:　25px;}
　　　　62.5% {left:　-10px;}
　　　　75% {left:　10px;}
}
　
@keyframes shakeit {
　　　　12.5% {left:　-50px;}
　　　　25% {left:　50px;}
　　　　37.5% {left:　-25px;}
　　　　50% {left:　25px;}
　　　　62.5% {left:　-10px;}
　　　　75% {left:　10px;}
}

Atributos abreviados de animación

Al crear una animación, se deben considerar muchos atributos. Sin embargo, también se puede especificar todos los atributos de animación en un solo atributo para acortar el código.

La propiedad de animación 'animation' es una propiedad abreviada que se utiliza para establecer una vez, en el orden enumerado, todos los atributos individualesAtributos de animación。por ejemplo：

.box {
　　　　width:　50px;
　　　　height:　50px;
　　　　background: rojo;
　　　　position: relative;
　　　　/*　Chrome, Safari, Opera　*/
　　　　-webkit-animation: repeatit　2s linear 0s infinite alternate;
　　　　
　　　　animation: repeatit　2s linear 0s infinite alternate;
}
　
/*　Chrome, Safari, Opera　*/
@-webkit-keyframes repeatit {
　　　　from {left: 0;}
　　　　to {left:　50%;}
}
　
@keyframes repeatit {
　　　　from {left: 0;}
　　　　to {left:　50%;}
}

CSS3Atributos de animación.

La siguiente tabla resume brevemente todas las propiedades relacionadas con la animación.