[分享]css3怎么实现动画

现在的网页设计不再是单调的静态页面了，动画已经成为了网页设计一个重要的元素，而动画的HTML5和CSS3的技术已经逐渐成熟了。CSS3中有一个专门负责实现动画效果的模块，名称为CSS动画模块。CSS3...

现在的网页设计不再是单调的静态页面了，动画已经成为了网页设计一个重要的元素，而动画的HTML5和CSS3的技术已经逐渐成熟了。CSS3中有一个专门负责实现动画效果的模块，名称为CSS动画模块。

CSS3动画的实现主要通过@keyframes规则来控制动画的过程，其定义格式如下：

@keyframes animation-name{//动画名称
  from{//开始状态的样式
      ...
  }
  to{//结束状态的样式
      ...
  }
}

在定义完@keyframes规则之后，可以通过animation属性来应用动画，并控制动画的细节，其定义格式如下：

animation： animation-name 动画名称，animation-duration 动画执行的时间， 【时间以秒为单位】，animation-timing-function 动画执行的速度曲线，animation-delay 动画开始执行的时间，animation-iteration-count 动画执行的次数，animation-direction 动画的方向，animation-play-state 动画的播放状态; 

下面就用一个简单的例子来演示：有一个div元素，当鼠标放上去时就有一个旋转的动画效果：

 div {
        width: 100px;
        height: 100px;
        background-color: red;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
        /* 这里是指定动画的名称为spin，动画持续时间为2秒，
        速度曲线为linear，延迟时间为0s，
        播放次数为无限次，动画方向为正方向，动画一开始是播放状态 */
        animation: spin 2s linear 0s infinite normal;
    }

    @keyframes spin {
        from {
            /* 这里的transform：rotate(0deg)表示将div元素以左上角为
               旋转中心，旋转0度；0deg会默认省略，直接写为transform：
               rotate(0)也同样有效 */
            transform: rotate(0deg);
        }
        to {
           /* transform：rotate(360deg)表示将div元素以左上角为
             旋转中心，旋转360度，即一圈*/
            transform: rotate(360deg);
        }
    } 

在上面的代码中可以看到，动画效果的名称为spin，其执行过程从旋转0度到旋转360度，持续时间为2秒，速度曲线为线性，循环播放，方向为正方向。这样，在鼠标停留在div元素上时，就会发生不断旋转的动画效果了。

使用CSS3实现动画简单又方便，功能也十分强大，而且在能够实现丰富多彩动画的同时还能减少对JavaScript的需求。