javascriptjqueryanimationpacman

Easier way to create animation for pacman

I found this code for pacman animation, it work's, but I could not understand what's going on there.

So, I tried to create easier animation for the same effect, using following code:

function name2(){
  $('.pacman').addClass('left');
  function name(){
    $('.pacman').removeClass('left');
  }
  setTimeout(name,1000);
}
setInterval(name2,100);

It work's, but the result look's ugly. How can i create the same animation in easier way?

Solution

  • Easier way in my opinion would be using css:

    .pacman{
  position: absolute;
  top: 2px;
  left: 0;
  border-radius: 50%;
  border: 49px solid yellow;
  animation: pacman .5s ease-in-out infinite;|
}
@keyframes pacman {
  0% {
    border-left: 49px solid transparent;
  }
  50% {
    border-left: 49px solid yellow;
  }
  100% {
    border-left: 49px solid transparent;
  }
}

    Demo