Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Animation duration

6/12
Recursos

Aportes 15

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Estas propiedades son de las más fáciles 👀. Simplemente debes decirle cuánto va a durar la animación y cuántas veces se va a repetir esa animación, es todo 👀. Únicamente con esas dos propiedades ya tienes suficiente paa que una animación empiece a correr 😄
.
Otro ejemplo de animación sencillo, además de el de la clase, podría ser el lanzamiento de algún objeto:

Cuando lanzamos un objeto es normal que a veces gire y se eleve un poco en el aire, para hacer una animación similar, solo necesitariamos 3 puntos:

Punto A: El inicio de la animación, el objeto tendrá un left inicial y un transform inicial:

0% {
    left: 50px;
    transform: rotate(0deg);
}

Punto B: A la mitad de la animación el objeto debió elevarse un poco, por tanto le cambiamos su propiedad en bottom:

50% {
    bottom: 60%;
}

Punto C: Al final de la animación el objeto debió caer y debió de haber dado unas cuantas vueltas, también debió de haberse movido, por lo que modificamos las propiedades left y transform, el bottom no lo modificamos porque por defecto volverá a su estado inicial:

100% {
    left: 1080px;
    transform: rotate(360deg);
}

Al final nuestro Keyframe podría quedar así y esto simularía un objeto que es lanzado 👀.

@keyframes throw {
  
  0% {
    left: 50px;
    transform: rotate(0deg);
  }
  
  50% {
    bottom: 60%;
  }
  
  100% {
    left: 1080px;
    transform: rotate(360deg);
  }
  
}

Obviamente necesitariamos tener un objeto al cual aplicarle la animación, este objeto debe tener un position: absolute; con respecto al contenedor padre, ya hice la tarea, así que pueden ver el código completo de esta animación aquí 👇👀.
.
Animación del lanzamiento de un objeto
.
Casi todos son estilos para que se vea más bonito y para preparar los elementos en su posición incial, pero el proceso de animado te lo acabo de explicar aquí 😄

Conejitos Saltarines 😄

En lo particular prefiero usar la propiedad transform para animar, ya que son más optimas para esto y hasta es más sencillo.
El código quedaría así:

@keyframes blink {
  0% {
    transform: scale(1, 1);
  }
  5% {
    transform: scale(1, 0.2);

  }
  10% {
    transform: scale(1, 1);

  }
}

Creo que también se puede usar porcentaje en el traslate para evitar modificarlo cada vez que necesitemos cambiar el tamaño de los ojos:

5% {
	height: 2px;
	transform: translate(0, 50%);
}

Quise darle a mi reto un significado especial, y por eso me basé en un dibujo que guardé y vectoricé hecho por mi pareja (: ❤️

.
gif
.
P.D.: El sanic sí es de un sticker que amo 😛

Notas de la clase

Resumen de la clase

En esta clase vimos como:

  • Darle nombre a nuestro keyframe (con animation-name: blink;)
  • Darle tiempo a nuestro keyframe (con animation-duration: 2s;)
  • Decirle al keyframe cuantas veces se tiene que repetir (con animation-iteration-count: infinite;)
  • Modificar las acciones del keyframe

.
Todo junto esto se ve algo como:

.clase{
  animation-name: blink;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes blink{
  10%{
    @code
  }
  20%{
    @code
  }
  30%{
    @code
  }
}

.
Esto fue lo que yo hice
.

Aqui les dejo mi diseño, yo quise agregarle pandas 😁
Aqui se puede visualizar mejor:
https://stivenbautista1998.github.io/pandaland/

Vamos avanzando 🔥

Retomando el tema de que le cueste menos al navegador propongo

@keyframes blink {
            0%{
                transform: scaleY(1);
            }
            5%{
                transform: scaleY(.125);
            }
            10%{
                transform: scaleY(1);
            }
        }

Me encanta como progreso la maestra entre los cursos anteriores. Este es mi resultado.
.

esta a nimación da un efecto de cerrar y abrir el ojo

@keyframes blink{
    0%{
      opacity: 0;
    }
    5%{
       opacity: 0.5;
    }
    10%{
      opacity: 1;
    }
}

6.-Animation duration

Ahora vamos a necesitar poner a parpadear a los ojos, para esto necesitamos un tiempo para que parpadeé y que sea infinito. Para esto vamos a usar dos propiedades principales, las cuales son:

  • animation-duration: Nos da cuanto va a durar haciendo la animación.
  • animation-iteration-count: cuantas veces se va a ejecutar la animación. n veces.

Yo personalmente reemplace el hight por la propiedad scaleY() en la animación por motivos de rendimiento.