[分享]css3怎么把动画动起来

CSS3具备动画效果，可以让网页更加生动活泼。让我们一起了解如何利用CSS3将动画效果添加到网页中。首先，我们需要为要创建动画的元素添加样式，比如颜色、大小、形状等。接着，我们需要定义一个动画的关键帧...

CSS3具备动画效果，可以让网页更加生动活泼。让我们一起了解如何利用CSS3将动画效果添加到网页中。

首先，我们需要为要创建动画的元素添加样式，比如颜色、大小、形状等。接着，我们需要定义一个动画的关键帧，在不同的时间点定义不同的样式。最后，添加动画属性，指定动画开始、结束的时间，以及动画的速度等。

/*为元素添加样式*/
.box{
  background-color: #f00;
  width: 100px;
  height: 100px;
}
/*定义关键帧*/
@keyframes myAnimation{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
/*添加动画属性*/
.box{
  animation: myAnimation 2s infinite linear;
} 

在上述代码中，我们定义了一个class="box"的元素，设置了它的背景色、大小。接着，在@keyframes中定义了一个动画"myAnimation"，从0度旋转到360度。最后，在.box的样式中添加了"animation"属性，指定动画名、时间为2秒、重复次数为infinite（无限循环）、速度为linear。

这就是CSS3实现动画的基本方法点，大家可以按照这个步骤添加动画效果。同时，CSS3还具备很多强大的动画属性，如transition、transform、opacity等。通过这些属性，我们可以添加更加复杂、多样化的动画效果。