CSS3中的动画功能

标签：

CSS3中的动画功能分为Transitions功能和Animations功能，这两种功能都可以通过改变CSS中的属性值来产生动画效果。

1.Transitions功能通过将元素的某个属性从一个属性值在指定时间内平滑过渡到另一个属性值来实现动画功能。transition属性的用法如下：

transition:property duration timing-function;

其中，property表示对哪个属性平滑过渡，取值可以是“background-color”、“color”、“width”等属性；duration表示在多长时间内完成属性值的过渡，单位是秒；
timing-function表示通过什么方式进行平滑过渡，可取的值有：
                                                        linear，表示以相同速度开始至结束的过渡效果；
                                                        ease：表示慢速开始，然后变快，然后慢速结束的过渡效果；
                                                        ease-in ：表示以慢速开始的过渡效果；
                                                        ease-out ：表示以慢速结束的过渡效果；
                                                        ease-in-out ：表示以慢速开始和结束的过渡效果；
                                                        cubic-bezier(n,n,n,n) ：在 cubic-bezier 函数中定义自己的值。可以是 0 至 1 之间的数值。
来看一个例子，鼠标移上去实现背景颜色渐变：页面中有一个div元素，黄色背景，通过hover属性指定当鼠标指针停留在div元素上时背景颜色变为绿色，通过transition属性指定，当鼠标指针移动到div元素上时，1秒内，让div元素的背景色从黄色平滑过渡到绿色。

<div>这是一个例子</div>
div{
  background-color:yellow;
  transition:background-color 1s linear;
}
div:hover{background-color:green;}

也可以同时平滑过渡多个属性值：

 <div>这是一个例子</div>
div{
  background-color:yellow;
  transition:background-color 1s linear,color 1s linear,width 1s linear;
}
div:hover{
    background-color:green;
    color:red;
    width:300px;
}

2.Animations功能:与Transitions功能相同，也是通过改变元素的属性值来实现动画效果的。
来看一个例子：一个背景颜色是红色的div，鼠标移上去之后，背景颜色将变为天蓝色，再由天蓝色变为黄色，最后再变回红色。

<div id="div3">实例文字3</div>
#div3{background-color: red;}
          @-webkit-keyframes mycolor{
              0%{background-color: red;}
              40%{background-color: skyblue;}
              70%{background-color: yellow;}
              100%{background-color: red;}
          }        
 #div3:hover{-webkit-animation-name:mycolor;
             -webkit-animation-duration:5s;
             -webkit-animation-timing-function:linear;
}

注：以上面这种分开的形式来写的，要加供应商前缀，即上例中的“-webkit-”，这个主要是对Chrome和safari浏览器的，IE浏览器加“-ms-”,火狐加“-moz-”.

也可以设置多个属性值同时改变的动画：

div{
    position:absolute;
    background-color:yellow;
    top:100px;
    width:300px;
    height:200px;
}
@-webkit-keyframes mycolor{
              0%{background-color: red;
                   transform:rotate(0deg);
                   }
              40%{background-color: skyblue;transform:rotate(30deg);}
              70%{background-color: yellow;transform:rotate(-30deg);}
              100%{background-color: red;transform:rotate(0deg);}
          }        
 div:hover{-webkit-animation-name:mycolor;
            -webkit-animation-duration:5s;
            -webkit-animation-timing-function:linear;
}

    如果在上面的代码里加上animation-iteration-count属性来指定动画的播放次数（同样要加供应商前缀），属性值如果是数字的话，就代表循环播放的次数，该属性值也可以为“infinite”，表示不停的循环播放。

     transition和animation都能实现动画效果，但是个人感觉animation能实现更多的效果，能进行更精确的控制，但在实现时，transition无需加供应商前缀，animation是必须要加的，这两个功能，Firefox4及以上的版本、Opera 10及以上版本、Safari 3.1及以上的版本、Chrome 8及以上版本、IE 10及以上的版本都支持。

CSS3中的动画功能

标签：

原文地址：http://www.cnblogs.com/dan-dan/p/4553061.html