css3动画怎么让它反复运动

CSS3动画是网页设计中非常有用的一种技术，它可以为网页增加生动活泼的效果，给人们带来更好的视觉体验。在使用CSS3动画时，我们希望能够让它反复运动，这样才能够更好地展现出动画的特效。

/* 定义一个简单的CSS3动画 */
@keyframes example {
  0% {background-color: red;}
  50% {background-color: blue;}
  100% {background-color: green;}
}

/* 将动画应用到元素上 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

/* 让动画反复运动 */
div {
  animation-iteration-count: infinite;
}

上述代码中，我们定义了一个名为“example”的CSS3动画，它会在0%、50%和100%三个状态下改变元素的背景颜色。然后，我们将这个动画应用到了一个div元素上，并通过“animation-duration”属性指定了它运动的时间。

接着，我们通过“animation-iteration-count”属性将这个动画的循环次数设置为“infinite”，这样就可以让它无限次地反复运动了。

当然，CSS3动画还有更多的属性和用法，可以让我们实现出各种炫酷的特效。只要我们熟练掌握了这些技巧，就可以让我们的网页设计更加生动有趣了。