一、实现动画的两部分：
1.使用动画首先要定义动画的规则
在@keyframes 中定义规则
2.应用动画元素：指定动画开始、结束以及中间点样式的关键帧
1.@keyframes 中定义规则
/*首先使用动画 要先定义动画规则*/
@keyframes mydonghua {
/*简单规则*/
from{
margin-left: 0;
}
to{
margin-left: 50%;
}
}
from与to就是动画的两个关键帧，表示开始时候的关键帧样式以及结束时候的关键帧样式。也可用百分号形式的数来描写关键帧，其中from与0%效果一致，to与100%效果一致。
当有多个关键帧时，设定相应的关键帧即可。例如：0%、25%、50%、75%、100%。
2.应用动画元素
指定动画开始、结束以及中间点样式的关键帧
/*应用动画的元素*/
#div1:hover{
/*animation: 动画名称 持续时间 过渡类型 延迟时间 次数 是否停留在终点 往复运动;*/
animation: mydonghua 2s linear 0.5s 3 forwards alternate;
}
效果图：
完整的代码:
<style>
#div1{
width: 100px;
height: 100px;
border-radius: 50px;
background: pink;
}
/*首先使用动画 要先定义动画规则*/
@keyframes mydonghua {
/*简单规则*/
from{
margin-left: 0;
}
to{
margin-left: 50%;
}
}
#div1:hover{
animation: mydonghua 2s linear 0.5s 3 forwards alternate;
}
</style>
<body>
<div id="div1"></div>
</body>
3.动画属性
animation-name：动画名称
animation-duration：指定动画完成的时间
animation-delay：指定动画开始的延迟时间
animation-iteration-count：指定动画应运行的次数
animation-direction：指定动画是向前播放、向后播放还是交替播放动画
animation-timing-function：指定动画的速度曲线
animation-fill-mode：动画的填充模式
animation：动画的简写。可以将以上几个属性设置为单一属性
4.实现动画的三个必须
1.animation-name：动画名称
2.animation-duration：指定动画完成的时间，因为时间默认为0
3…@keyframes 规则
以上三个，缺少任何一个都不能实现动画效果。
5.animation：动画的简写语法
//animation: 动画名称 持续时间 过渡类型 延迟时间 次数 是否停留在终点 往复运动;
animation: mydonghua 2s linear 0.5s 3 forwards alternate;
6.animation-direction：指定动画是向前播放、向后播放还是交替播放动画
属性：
1.normal ： 动画正常播放（向前）。默认值
//normal向前运动
animation: mydonghua 2s linear 0.5s 3 normal;
2.reverse ：动画以反方向播放（向后）
//reverse 动画以反方向播放（向后）
nimation: mydonghua 2s linear 0.5s 3 reverse ;
3.alternate ：动画先向前播放，然后向后
//alternate ：动画先向前播放，然后向后
nimation: mydonghua 2s linear 0.5s 3 alternate ;
4.alternate-reverse ：动画先向后播放，然后向前
//alternate-reverse ：动画先向后播放，然后向前
nimation: mydonghua 2s linear 0.5s 3 alternate ;
7.animation-timing-function：指定动画的速度曲线
属性：
1.ease： 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
2.linear ： 规定从开始到结束的速度相同的动画
3.ease-in ： 规定慢速开始的动画
4.ease-out ：规定慢速结束的动画
5.ease-in-out： 指定开始和结束较慢的动画
8.animation-fill-mode指定动画的填充模式
在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。
属性值：
1.none 默认值。动画在执行之前或之后不会对元素应用任何样式。
2.forwards 元素将保留由最后一个关键帧设置的样式值，依赖次数和动画方向决定（依赖 animation-direction 和 animation-iteration-count）。此处以3次和alternative为例子。
animation: mydonghua 2s linear 0.5s 3 alternate forwards ;
3.backwards 元素将获取由第一个关键帧设置的样式值，并在动画延迟期间保留该值。依赖 animation-direction
animation: mydonghua 2s linear 0.5s 3 alternate backwards ;
4.both 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。
animation: mydonghua 2s linear 0.5s 3 alternate both;
9.以百分数来描写关键帧
以0%，25%，50%，75%，100%处设置关键帧来改变元素的位置以及背景颜色。
完整代码：
<style>
#div1{
width: 100px;
height: 100px;
border-radius: 50px;
background: pink;
position: absolute;
}
/*首先使用动画 要先定义动画规则*/
@keyframes mydonghua {
/*简单规则*/
0%{
top:0;
left: 0;
background-color: red;
}
25%{
top:100%;
left:25%;
background-color: orange;
}
50%{
top:0;
left: 50%;
background-color: purple;
}
75%{
top:100%;
left: 75%;
background-color: green;
}
100%{
top: 0;
left: 95%;
background-color: blue;
}
}
#div1:hover{
/*animation: 动画名称 持续时间 过渡类型 延迟时间 次数 是否停留在终点 往复运动;*/
animation: mydonghua 3s linear 0.5s 3 alternate forwards ;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
效果图：
