[分享]css3控制动画

CSS3是网页设计中不可或缺的一部分，它具有强大的控制动画的能力，可以让你的网页更加生动，吸引人眼球。下面我们来学习一些控制动画的CSS3属性。 / 定义一个动画 / keyframes exampl...

CSS3是网页设计中不可或缺的一部分，它具有强大的控制动画的能力，可以让你的网页更加生动，吸引人眼球。下面我们来学习一些控制动画的CSS3属性。

 /* 定义一个动画 */
   @keyframes example {
      from {left:0px;}
      to {left:200px;}
   }

   /* 指定动画的样式 */
   div {
      animation-name: example;
      animation-duration: 2s;
      animation-delay: 1s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-direction: alternate; 
   } 

上面的代码定义了一个名为example的动画，让一个div元素沿着水平方向从左往右移动200像素。我们还可以通过控制animation-duration属性来调整动画持续的时间，animation-delay属性可以指定动画开始前的等待时间。

animation-timing-function属性可以控制动画变化的速率，包括linear(匀速),ease-in(由慢到快),ease-out(由快到慢)等。而animation-iteration-count属性则可以指定动画的循环次数，infinite表示无限循环。

最后，animation-direction属性可以控制动画循环的方向，alternate表示动画来回往复。

CSS3还有很多其他强大的控制动画的属性，这里只是简单介绍了一些常用的。通过合理运用这些属性，你可以创造出更加生动、丰富多彩的网页。