animation的属性
animation-name
◦检索或设置对象所应用的动画名称
必须与规则@keyframes配合使用，
例如:@keyframes mymove{} animation-name:mymove
animation-duration
动画指定需要多少秒或毫秒完成
说明：animation-duration:3s; 动画完成使用的时间为3s
animation-timing-function
设置动画将如何完成一个周期
linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0,
0.58, 1.0)
step-start:马上跳到动画每一结束桢的状态
animation-delay
设置动画在启动前的延迟间隔。
说明：animation-delay:0.5s; 动画开始前延迟的时间为0.5s)
animation-iteration-count
定义动画的播放次数。
animation-iteration-count: infinite | number;
infinite：无限循环
number: 循环的次数
animation-direction
指定是否应该轮流反向播放动画。
normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行 alternate-reverse：动画先反运行再正方向运行，并持续交
替运行
animation-fill-mode
规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state
检索或设置对象动画的状态
属性值
animation-play-state:running | paused;
running:运动
paused: 暂停
animation-play-state:paused; 当鼠标经过时动画停止，鼠
标移开动画继续执行
form to写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
百分比写发
<style>
@keyframes changecolor{
0%{
background: red;
}
20%{
background:blue;
}
40%{
background:orange;
}
60%{
background:green;
}
80%{
background:yellow;
}
100%{
background: red;
}
}
div {
width: 300px;
height: 200px;
background: red;
color:#fff;
margin: 20px auto;
}
div:hover {
animation: changecolor 5s ease-out .2s;
}
</style>
</head>
<body>
<div>hover颜色改变</div>
</body>
上一篇： 教你拿站和找关键词思路（图）
下一篇： animation的属性值