No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Animation name y keyframe

5/12
Recursos

Aportes 7

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

☝ Básicamente el uso de la directiva @keyframes te permite definir el comportamiento de tu animación punto por punto, y cualquier elemento puede usar esta animación por medio de la regla animation-name.
.
Dentro de @keyframes especificamos cada punto de nuestra animación por medio de porcentajes, por ejemplo, tomando en cuenta este ejemplo:
.

.
Podríamos tener un @keyframes de esta forma:
.

@keyframes jump {

    /* Punto A */
    0% {

    }

    /* Punto B */
    40% {

    }

    /* Punto C */
    60% {

    }

    /* Punto D */
    90% {

    }

}

.
Los porcentajes pueden ser los que tú quieras, pero lo más importante a tener en cuenta es que mientras más cerca esté un porcentaje de otro más rápido será la transición de un punto a otro 😄
.

Notas de la clase

5.-Animation name y keyframe

Animation puede tener solo un valor, o varios

  • animation-name: Con esta le colocamos un nombre a la fracción de código que queremos animar, para que el keyframe sepa a quién debemos animar.
  • keyframes: Se va de A a B con ciertas manipulaciones de por medio. Está es la diferencia crucial, que podemos manipular el tiempo desde el inicio hasta el final usando palabras clave como from y to para decir que solo desde el inicio hasta el final.

No es necesario llegar de 0 a 100.

Resumen de la clase

En esta clase vimos cual es la diferencia entre las animaciones y las transiciones, ya que uno se puede llegar a confundir bastante, esto debido a que ambas suenan bastante similar e incluso se podría llegar a pensar que son sinónimos.
.

Diferencia entre transiciones y animaciones

Las transiciones solo pueden ir de un punto A a uno B en determinado tiempo. Sin embargo, en las animaciones, en el lapso de tiempo que va del punto A al B (osea, en el punto intermedio), puede haber ciertos movimientos.
.

.

Keyframes

Entonces, sabiendo cual es la diferencia entre las animaciones y transiciones, es hora de saber como los @keyframes nos ayudan a animar a nuestros elementos.
.
Un keyframe no es mas que una linea del tiempo que empieza desde el punto A y termina en el punto B. Nosotros le podemos decir a ese keyframe en que parte del “camino” modifique al elemento. Además de que nosotros le decimos cuantos segundos tiene que durar ese “viaje”.

Si por alguna razón alguien tiene problema para aplicar propiedad de movimiento como translate o rotate y no les funciona prueba haciendo flex o grid al contenedor padre, me paso que estas propiedad no funcionaban cuando los contenedores padres eran block.

gracias por el cheat sheet