Animaciones CSS: Control de Duración e Iteració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í 😄

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%);
}

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
.

Notas de la clase

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);
            }
        }

Vamos avanzando 🔥

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.

El codigo de la clase se puede resumir y optimizar utilizando transform:

@keyframes blink {
  0% {
    transform: scaleY(1);
  }
  5% {
    transform: scaleY(0.25);
  }
  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;
    }
}

Así va quedando el mío:v

mi proyecto hasta el momento , aprovechando la fecha,

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

mas de la mitad del curso es ilustración con CSS, no animación.

Wow increible!!!