介绍 animation-timing-function:取值; & lt; !DOCTYPE html>
& lt; html xmlns=癶ttp://www.w3.org/1999/xhtml"比;
& lt; head>
& lt; title> CSS3 animation-timing-function属性& lt;/title>
& lt;风格类型=拔谋?css"比;
@-webkit-keyframes mytransform
{
0% {}
100%{宽度:300 px;}
}
div
{
宽度:100 px;
高度:50 px;
text-align:中心;
行高:50 px;
border - radius: 0;
background - color: # 14 c7f3;
-webkit-animation-name: mytransform;
-webkit-animation-duration: 5 s;
-webkit-animation-timing-function:线性;
}
div + div
{
margin-top: 10 px;
}
# div1 {-webkit-animation-timing-function:线性;}
# div2 {-webkit-animation-timing-function:缓解;}
# div3 {-webkit-animation-timing-function:在;}
# div4 {-webkit-animation-timing-function:打发走;}
# div5 {-webkit-animation-timing-function: ease-in-out}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=癲iv1"祝辞linear
& lt; div id=癲iv2"祝辞ease这篇文章主要介绍了css3中的播放方式animation-timing-function属性的示例分析,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
animation-timing-function属性
在css3中,我们可以使用animation-timing-function属性来设置动画的播放方式,所谓的“播放方式”主要用来指定动画在播放时间内的速率,其中,animation-timing-function属性跟transition-timing-function属性类似,大家可以对比理解记忆一下。
语法:
说明:
animation-timing-function属性取值跟transition-timing-function属性取值一样,共有5种,具体如下:
举例:
