Blinky's animation

Blinky's animation

Publicado el August 19, 2020

Continuing with CSS Drawings with a single div, I wanted to add Blinky to the blog but with a little animation using CSS animations.


CSS animations now are very powerful and are supported in almost all browsers. For my case, I wanted to do an easy animation of Blinky moving from right to left. For this, I used translate() transform function:









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

Now a ghost with a random color will show next to the title of each article. If you click the ghost, you will enable/disable its animation. Also, with JavaScript, the ghost's eyes follow the mouse movement or cursor.


Reference: Animation, CSS Keyframe Animation with Delay Between Iterations and 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

Sólo para mostrar tu gravatar

Contáctame @

Subscríbete al blog

Al subscribirte, aceptas los Términos de Servicio y la Política de Privacidad de Revue

Frase

Contáctame @

Subscríbete al blog

Al subscribirte, aceptas los Términos de Servicio y la Política de Privacidad de Revue

Frase