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