Animation功能中实现动画的方法
方法
属性值的变化速度
linear
在动画开始与结束时以同样速度惊醒改变
ease-in
动画开始时速度很慢，然后速度沿曲线值进行加快
ease-out
动画开始时速度很快，然后速度沿曲线值进行放慢
ease
动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢
ease-in-out
动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
实现动画的各种方法的比较示例
type=“text/css”>
@keyframesmycolor{
0%{
width:100px;
height:100px;
}
100%{
width:500px;
height:500px;
}
}
div{
background-color:red;
width:500px;
height:500px;
animation-name:mycolor;
animation-duration:5s;
animation-timing-function:ease-out;
}
通过以上代码我们可以看出Animations功能中各种实现的方法的区别，该示例中有一个div元素，页面打开时，该div元素在5秒内从长100px、宽100px扩大到长500px、宽500px，通过改变Animation-timing-function属性的属性值，然后观察div元素额长度和宽度再整个动画中的变化速度，可以看出实现动画的各种方法之间的区别。
最后介绍下如何使用animation功能来实现网页设计中的一种经常使用的动画效果——网页的淡入效果。通过再开始帧与结束帧中改变页面的opacity属性的属性值来实现页面淡入的效果。代码如下：
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
实现网页淡入的效果示例
type=“text/css”>
@keyframesfadein{
0%{
opacity:0;
background-color:white;
}
100%{
opacity:1;
background-color:white;
}
}
示例文字
欢迎加入技术QQ群：364595326
网友评论