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

@media (prefers-reduced-motion) {
  .ghost-animation {
    animation: none;
  }
}

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