css3中变形与动画（三）_html/css_WEB-ITnose

transform可以实现矩阵变换，transition实现属性的平滑过渡，animation意思是动画，动漫，这个属性才和真正意义的一帧一帧的动画相关。本文就介绍animation属性。

animation属性通过一些关键帧中元素属性的改变来实现动画效果。当然也可以控制动画持续时间，动画迭代次数等。

一、例子

在介绍transition时开篇有一个例子就是实现鼠标放上去，div宽度从100px缓慢增大到200px。

用transition实现方法如下

div:hover{    width: 200px;    transition:width 5s ease-in;} 

用animation也能实现类似效果，如下：

 div {    width: 100px;    height: 100px;    background-color: red;}@keyframes enlarge {    0% {        width: 100px;    }    50% {        width: 150px;    }    100% {        width: 200px;    }}div:hover {    /*width: 200px;    */       /*transition:width 5s ease-in;*/    animation: 5s enlarge;}} 


      
查看更多关于css3中变形与动画（三）_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did108898