css做js动图代码

CSS对于网页设计来说早已不是什么新鲜事物，但它的用途一直在不断扩展。其中，在网页中实现JS动图就是CSS之一的强项。在这篇文章中，我们将探讨如何使用CSS编写JS动画。

大多数人都知道CSS可以改变HTML元素的外观，但你知道CSS也能通过使用CSS3 Animation属性来为元素创建动画吗？接下来使用一个简单的例子来解释如何将CSS与JS结合来创建动画。

//CSS样式
.animated {
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
} 

@keyframes example {
  0%   {background-color: red;}
  50%  {background-color: yellow;}
  100% {background-color: blue;}
}

//JS代码
let animation = document.querySelector(".animated");
animation.addEventListener("click",function() {
  animation.style.animationPlayState = "paused";
}); 

上面的代码使用了CSS Animation属性，使一个名为“animated”类的元素从红到黄再到蓝来回变化。在这个例子中，CSS动画的属性设置如下：

• animation-name: 定义动画的名称
• animation-duration: 定义每个动画周期的持续时间
• animation-iteration-count: 定义动画循环的次数。在这个例子中我们使用infinite，使动画无限循环。

然而，这个CSS动画是由JS触发的。在这个例子中使用JS来控制动画播放和暂停，只需在元素上添加一个事件监听器。当事件触发时，将元素的animation-play-state属性设置为paused，使动画停止播放。

总之，CSS可以被用于JS动画中的多种方式，使动画变得更加生动和吸引人。 通过使用CSS的Animation属性和JS的事件监听器，您可以为网页增添各种动画效果。