¿Cuál es la diferencia entre animación CSS y transición CSS?
Transición: Controlar (tiempo, etc.) el cambio de uno o más atributos de un elemento, similar a la animación de interpolación flash. Pero sólo hay dos momentos clave. Comienza, termina.
Animación: Controla (tiempo, etc.) el cambio de un atributo o múltiples atributos de un elemento, similar a la animación flash interpolada. Se pueden configurar varios fotogramas clave.
La diferencia entre transición y animación:
La transición necesita desencadenar un evento, mientras que la animación puede cambiar explícitamente el elemento css con el tiempo sin desencadenar ningún valor de atributo, logrando así una animación. efecto.
Transición:
El atributo de transición es un atributo de animación simple, muy simple y fácil de usar. Se puede decir que es una versión simplificada de la animación, que generalmente se utiliza para efectos especiales simples de páginas web. Por ejemplo, tiene los dos estilos siguientes:
.position{
izquierda: 100px
arriba:
}
.animate{
-webkit-transition: left0.5sease-out;
izquierda: 500px
arriba: 500px;
top: 500px;
p>
}
El atributo de transición de animar significa: cuando el atributo izquierdo cambia, se ejecuta el efecto de animación ( solo basado en el cambio de atributo izquierdo, otros atributos no se agregarán a la animación. Cámbielo dentro);
Primero, el CSS es la posición. Cuando se agrega animate a cssList o la posición se reemplaza por animate, el atributo del elemento cambia y se activa webkit-transition. El valor antes del cambio de atributo especificado se usa como valor inicial y el atributo después del cambio se usa como valor inicial. valor final para ejecutar el efecto de animación. Este es un proceso de cambio simple de dos puntos, que simplifica enormemente la complejidad del atributo de animación.
Al mismo tiempo, si hay un nuevo cambio en el valor del atributo durante la animación de transición, la ejecución de la animación actual se interrumpirá y el valor del atributo en el momento de la interrupción se proporcionará al nuevo animación como valor inicial para el cálculo. Nuevos efectos de animación.
Animación:
Introducido en la Introducción oficial, este atributo es una extensión del atributo de transición. Pero esta sencilla introducción contiene algo que no es sencillo: fotogramas clave.
Cualquiera que haya realizado animación Flash sabrá que hay dos armas básicas en Flash: la línea de tiempo y los fotogramas clave. La aparición de csskeyframes proporciona una colección de estos dos atributos en el mundo flash.
Mire un ejemplo de fotogramas clave simples:
@keyframes'wobble'{
0{
izquierda: 100px
}
30{
izquierda: 300px;
}
100{
izquierda: 500px;
}
}
.animate{
izquierda: 100px
-webkit-animation: wobble0.5sease-out ;
-webkit-animation-fill-mode: hacia atrás;
}
El código anterior muestra un 'bamboleo' de fotogramas clave, donde 0 significa cambiar el atributo Los valores en diferentes puntos de tiempo de la animación pueden controlar con mayor precisión los efectos de los atributos en cualquier momento del cambio de animación. Animation calcula los atributos del elemento de animación en función de los cambios de atributos proporcionados por estos fotogramas clave. A diferencia de la transición, los fotogramas clave brindan más control, especialmente el control de la línea de tiempo. Esto hace que la animación css sea más poderosa, de modo que algunos efectos de animación flash se pueden controlar directamente mediante css, y todo esto solo requiere unas pocas líneas de código. Como resultado, nacieron una gran cantidad de herramientas de animación basadas en CSS (una gran cantidad en comparación con Flash), que se utilizan para reemplazar la parte de animación de Flash. Para herramientas de animación, puede consultar Webstandards-basedAnimationTools.
Además, lo más importante en el atributo de animación es: Animation-fill-mode. Este atributo indica si es el estilo especificado por (de. /0) o Utilice el estilo especificado por (to/100) como estilo después de que se complete la animación. Esto es muy conveniente para nosotros controlar el estilo final de la animación y garantizar la coherencia general de la animación.