Combinación de transiciones CSS3 para animaciones complejas

Las transiciones animadas se pueden hacer con poco esfuerzo gracias a las transiciones CSS3 y se usan mucho hoy en día. Puede modificar diferentes características al mismo tiempo. También existe la posibilidad de jugar con los atributos que desea animar en diferentes momentos y con diferentes duraciones.

Transiciones CSS3 usando retrasos

El atributo «transiciones» conoce cuatro valores diferentes. El primer valor determina qué atributos deben animarse por transición. Mientras que «todos» simplemente anima todos los atributos (siempre que haya algo para animar), también puede optar por animar solo un atributo específico. El segundo valor define la duración de la animación en segundos y el tercer valor es responsable de la aceleración – „ease“ „ease-out“ o „ease-in“, por ejemplo. También existe la opción de definir un desplazamiento temporal. Esto hace que la transición comience después de un período de tiempo específico.

div {
  transition: all 2s ease 1s;
  border-radius: 0;
  transform: rotate(45deg);
}

div:hover {
  border-radius: 100%;
  transform: rotate(90deg);
}

En el ejemplo, los valores «border-radius» y «transform» se modifican al pasar el mouse. La animación tarda dos segundos, pero comienza con un desplazamiento de un segundo.

Transiciones con atributos animados al mismo tiempo

Combinación de múltiples transiciones CSS3

La mayoría de ustedes probablemente conocen la forma presentada aquí. Desafortunadamente, tiene la desventaja de que la transición para todos los atributos – «borde-radio» y «transformación» en este caso – se reproducen al mismo tiempo. Sin embargo, un marcado ligeramente modificado le permite asignar una duración de animación individual, así como un retraso individual a cada uno de ellos.

div {
  transition: transform 0.5s ease, border-radius 1s ease 0.5s;
  border-radius: 0;
  transform: rotate(45deg);
}

En el segundo ejemplo, los valores personalizados se asignan a cada atributo que se supone que debe animarse a través de la «transición». Los valores están separados por comas. Aquí, la animación del atributo „border-radius“ comienza medio segundo después del inicio de la animación del atributo „transform“.

Transiciones con atributos animados independientemente unos de otros

De esta manera, puede crear efectos de desplazamiento completamente complejos sin usar JavaScript, así como sin anidar elementos HTML y equipar cada uno con un efecto de transición. Además, el orden de las animaciones permanece igual incluso cuando se invierte el movimiento. Aquí, „transformar“ se anima primero, seguido de „border-radius“.

Ventaja sobre „@keyframes“ y „animación“

Por supuesto, también es posible definir animaciones tan complejas con el atributo CSS3 „animación“ en combinación con la regla „@keyframes“. Las transiciones, sin embargo, tienen una ventaja, ya que la transición animada se adapta automáticamente cuando se cambia la clase o pseudoclase. Esto significa que cuando deja el estado de desplazamiento antes de completar la animación de la transición, la animación vuelve automáticamente a su apariencia original. Esto no sucede cuando se usa „animación“ y „@keyframes“. Sin embargo, todas las transiciones presentadas tienen sus límites, por ejemplo, cuando desea animar diferentes efectos de «transformación» independientemente unos de otros, como «escala()» y «rotar()». Después de todo, ambos están definidos por el mismo atributo. Si desea animaciones independientes, deberá usar «@keyframes» y «animación».

Ejemplo en Codepen

• Transiciones Combinadas

(dpe)