javascript - 为 pacman 创建动画的更简单方法

Question

我找到了this pacman 动画的代码，它可以工作，但我无法理解那里发生了什么。

因此，我尝试使用以下代码创建更简单的动画以获得相同的效果:

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

它有效，但结果看起来很难看。如何以更简单的方式创建相同的动画？

Answer 1

我认为更简单的方法是使用 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