Hola a todos, y bienvenidos a este curso de front-end. Soy Lao Zhao desde el frente. Hoy aprenderemos el concepto y el uso de la animación y transición CSS.
Las animaciones y transiciones CSS nos permiten agregar efectos animados y dinámicos a la página, mejorar la experiencia del usuario de la página y también son una parte integral del diseño web moderno.
Primero, introduzcamos el concepto de transiciones CSS. La transición de CSS (transición) se refiere a establecer un efecto de transición cuando cambia una determinada propiedad de CSS, de modo que el cambio no sea tan abrupto, sino una transición suave a un nuevo estado. Las transiciones de CSS se pueden aplicar a cualquier propiedad de CSS que cambie de un valor a otro, como el color, el tamaño, la posición y más.
Por ejemplo, cuando pasamos el mouse sobre un enlace, el color de fuente del enlace cambia, podemos usar transiciones CSS para hacer que la transición de color sea suave al nuevo estado.
CSS
a { color: blue; transition: color 0.5s ease; }
a:hover { color: red; }En el código anterior, establecemos el color inicial del enlace en azul y establecemos un efecto de transición para el cambio de color. Cuando pasamos el mouse sobre el enlace, el color de fuente del enlace cambiará suavemente de azul a rojo, y el proceso dura 0,5 segundos.
Además de las transiciones CSS, también podemos usar animaciones CSS (animación) para lograr efectos dinámicos más complejos. La animación CSS se compone de varios fotogramas clave (keyframes), cada fotograma clave define un estado en la animación y CSS calculará automáticamente el estado intermedio para lograr efectos dinámicos.
CSS
@keyframes myanimation {
0% {
transform: scale(1);
}
50% {
transfo