Las animaciones CSS parecen un poco difíciles de entender al principio, pero en realidad son relativamente simples.
Básicamente, se basan en el principio de fotogramas clave. Usted especifica exactamente cómo debería verse un elemento en un pequeño conjunto de tiempos específicos (fotogramas clave). Luego, su navegador puede calcular cómo debería verse el elemento en cada fracción de segundo entre cada par de fotogramas clave que haya especificado. Este proceso se llama interpolación.
Ejemplo:
- ¿Cuánto tiempo llevará aprender el diseño web?
- ¿Dónde se puede usar el nodo js?
- ¿Cuál sería el costo de crear un sitio web de redes sociales desde cero? ¿Qué porcentaje de capital se puede dar en lugar de dinero para cada tarea?
- Cómo vincular Angular 2 v4 a Node.js
- ¿Cuáles son los componentes de los servicios web?
Para un ejemplo simple, podemos animar un elemento que se mueve por la pantalla simplemente especificando sus posiciones de inicio y finalización.
En CSS, creamos una regla de fotogramas clave denominada movimiento simple como esta:
@keyframes simple-movement {
0% {izquierda: 0px; }
100% {izquierda: 200 px}
}
Esto dice que al 0%, el valor de left será 0px, y luego al 100%, su valor será 200px. Su navegador utiliza interpolación para determinar cuál debería ser el valor de izquierda en cada dos por ciento.
Ahora, podemos especificar un elemento que debe ser animado de esta manera:
.moving-box {
color rojo;
ancho: 40px;
altura: 40px;
posición: absoluta;
izquierda: 0px;
nombre-animación: movimiento-simple;
duración de la animación: 1s;
}
Esto hace un cuadro bastante simple y le dice que debe usar la animación llamada movimiento simple y estirarla durante 1 segundo.
¡Esto es todo lo que necesitamos para crear una animación! Te animo a que lo pruebes por ti mismo.
Deberías jugar con este ejemplo; tal vez intente algunas cosas como agregar un valor al 50% o aprender sobre las propiedades de animación-iteración-conteo, animación-dirección y animación-sincronización-función (algunos buenos recursos aquí: animación). Para desvanecerse, es posible que desee consultar la propiedad de opacidad CSS.
