Quantcast
Animación de Blinky

Animación de Blinky

Publicado el 19 de agosto de 2020

Continuando con Dibujos en CSS con un único div, quise agregar a Blinky al blog pero con una pequeña animación usando las animaciones de CSS.


Las animaciones de CSS ya son muy poderosas y soportadas por casi todos los navegadores. Para mi caso, quise hacer una animación sencilla de Blinky moviéndose de derecha a izquiera. Para ello, utilicé la función de transformación translate():









@keyframes ghostslidein {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  to {
    transform: translate(-140vw, 0);
  }
}

.ghost-animation {
  animation: 10s linear infinite running ghostslidein;
}

Ahora un fantasma de un color aleatorio saldrá a la par del título de cada artículo. Si se le da click al fantasma, se habilitará o deshabilitará su animación. Además, con JavaScript, los ojos del fantasma siguen el movimiento del mouse o del cursor.


Referencia: Animation, CSS Keyframe Animation with Delay Between Iterations y CSS Keyframe Animation with Delay Between Iterations.

Compartir en: TwitterFacebook

Si quieres apoyar el blog y los experimentos, puedes hacerlo por PayPal o Buy me a coffee. ¡Agradezco su apoyo! :-)

buy me a coffee

No es para spam. Mostrará tu gravatar.

Contáctame @

Contáctame @