animation-name:自定义动画名称；
keyframes:关键帧；
animation-iteration-count：动画执行次数；
div{
width: 300px;
height: 300px;
background-color: pink;
animation-name:fromLeftToRight;
animation-duration:2s;
animation-iteration-count:3;
}
@keyframes fromLeftToRight{
from{
margin-left: 10px;
}
to{
margin-left: 300px;
}
}
animation-direction：normal | reverse | alternate | alternate-reverse;
normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行
div {
width: 100px;
height: 100px;
background: #5CBE3E;
margin: 5px;
animation-name: fromLeftToRight;
animation-duration: 3s;
animation-iteration-count: infinite;
}
div{
animation-direction: reverse;
}
.alternate {
animation-direction: alternate;
}
div {
animation-direction: alternate-reverse;
}
@keyframes fromLeftToRight {
from {
margin-left: 0;
}
to {
margin-left: 300px;
}
}