一、定义和用法
通过 @keyframes 规则，能够创建动画。
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。
二、语法
@keyframes animationname {
from{css-styles;}
to{css-styles;}
}
@keyframes animationname {
0%{css-styles;}
100%{css-styles;}
}
三、animation属性
| 属性 |
描述 | 属性值 |
| animation-name | 动画的名称。 | |
| animation-duration | 完成动画所用时间 | |
| animation-delay | 延迟时间。 | |
| animation-iteration-count | 动画被播放的次数。 | |
| animation-timing-function | 动画的速度曲线。 | ease：逐渐变慢，默认值 linear：匀速 ease-in：加速 ease-out：减速 ease-in-out：加速然后减速 |
| animation-direction | 是否轮流反向播放动画 | normal：默认值，动画按正常播放; reverse：动画反向播放; alternate：动画在奇数次正向播放，在偶数次反向播放； alternate-reverse：动画在奇数次反向播放，在偶数次正向播放； initial：设置该属性为它的默认值； finherit：从父元素继承该属性。 |
| animation-play-state | 动画是否在运行或暂停 | paused：动画暂停 running：动画运行 |
| animation-fill-mode | 当动画不播放时要应用到的样式 | node：默认值，动画按预期进行和结束，在动画完成最后一帧时，动画会反转到初始帧处 forwards：动画在结束后继续应用最后的关键帧的位置 backwards：元素应用动画样式时迅速应用动画的初始帧 both：元素动画同时具有forwards和backwards效果 |
四、例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>keyframes</title>
<style>
*{margin:0;padding: 0;}
div{
width:400px;height:400px;
border:1px solid #333;
margin:0 auto;
position:relative;
}
p{
width:50px;height:50px;
background:purple;
border-radius:50%;
position:absolute;
left:0;top:175px;
animation:pmove 5s 2s infinite linear alternate;
}
@keyframes pmove{
0%{left:0px;top:175px;background:purple;}
25%{left:175px;top:350px;background:palevioletred;}
50%{left:350px;top:175px;background:plum;}
75%{left:175px;top:0px;background:sandybrown;}
100%{left:0px;top:175px;background:salmon;}
}
tr{height:30px;line-height:30px;}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
