Animation duration

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

  }
}

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 😛

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

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

Notas de la clase

 
así quedo mi nousagi ya con animacion (*w*)

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
.

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 🔥

mi proyecto hasta el momento , aprovechando la fecha,

Hola, mi avabce.
https://drive.google.com/file/d/1Xt_SPxrMdiYupzEYbP0tU_Insou8XUTm/view?usp=sharing

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

Así va quedando el mío:v

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.

Mi codigo lo subí a github.
https://github.com/samuelreyesiglesias/animacion-css/blob/master/juego.html

Wow increible!!!

Asi quedaria el parpadeo de mis fantasmas 👀

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

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