He creado un CodePen un loading css animate basado en un Dribble que encontré la otra vez y me llamo mucho la atención y me dije: «Eso lo tengo que hacer» y a partir de esto empezó a gustar la idea de aprender cosas de UI/UX, CSS y diseño digital, como se están moviendo las tendencias de diseños es interesante y choca mucho con mis gustos, pero es como la moda, si esta de moda vende y llama la atención.

Bueno el CodePen es este:

See the Pen Animación Fill window by Daniel Ivan Santarriaga Espinosa (@Saymo) on CodePen.light

El código es sencillo, yo pensaba que era más complicado pero no, si sabes como funciona el css animation-* y los @keyframe es fácil, hay un inicio y un final y debes indicar los cambios que quieres realizar. La clave es lo siguiente:

.text{
  animation-duration: 0.5s;
  animation-name: blik;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.animacion{
  animation-duration: 2s;
  animation-name: slidein;
  
  width: 100vw;
  height: 100vw;
}

@keyframes slidein {
  from {
    width: 250px;
    height: 250px;
    transform: rotate(0deg);
  }

  to {
    width: 100vw;
    height: 100vw;
    transform: rotate(90deg);
  }
}

Es facil de leer, no? animation-duration es para indicar cuanto dura la animación, animation-name es el nombre, y el bloque de @keyframes son las instrucciones de tu animación, con un inicio (from) a un final (to).

Toma en cuenta que en el to el ancho y el alto del elemento es el 100 viewport, para que no tengas que calcularlo manualmente por pantalla.

Saludos a todos y espero que este loading css animate le sirva a alguien.

Actualización

Luego de publicar esta nota, me di cuenta que mi código tenia un error y es que no funcionaba para dispositivos que tuvieran un ancho menor que su alto, es decir, móviles.

Y después de mucho investigar animaciones CSS descubrí que tenia muchos errores de implementación.

1.- La idea de centrar mi cuadro principal era valida con display flex, pero al momento de hacer el giro en un móvil el cuadro no obedecía a la medida del 100vh y no terminaba de ocupar todo el ancho en su alto.

Por lo que cambie en centrar el cuadro con transformaciones:

.cuadrado{
  background-color: #056;
  padding: 1rem;
  color: white;
  font-size: 3rem;
  font-family: arial;
  width: 250px;
  height: 250px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

2.- No necesito poner los cambios del to del @keyframes en la clase animation, esto lo tenia porque regresaba a su posición original al terminar la animación. Descubrí que se resuelve con animation-fill-mode: forwards;

3.- Tampoco necesito poner el from en el @keyframes

Al final el código termino así:

See the Pen Animación Fill window by Daniel Ivan Santarriaga Espinosa (@Saymo) on CodePen.light

El código termino más limpio y cumplió con mis expectativas de cubrir tanto a pantallas de escritorio y a pantallas móviles.

Saludos.