首先看一下页面的布局
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
animation（动画）和transition（过渡）其实差不多，就是一个自己会动（动画），一个需要触发才可以动。
动画的定义（@keyframes（关键帧））
设置动画效果，必须要先设置一个关键帧，关键帧设置了动画的每一个步骤，最简单的关键帧的定义如下：(定义在css文件或者在style标签中，moveToRight是自己取的名字，类似于我们的函数名，需要被调用）
@keyframes moveToRight {
from{
margin-left: 0%;
}
to{
margin-left: 100%;
}
}
也可以写成：
0% 100%都是可以调整的也可以25% 50% 75%都是可以的
数值自己定根据自己想要的效果进行设置（类似）
@keyframes moveToRight {
0%{
margin-left: 0%;
}
100%{
margin-left: 100%;
}
}
@keyframes moveToRight {
0%{
margin-left: 0%;
}
25%{
margin-left: 33%;
}
50%{
margin-left: 50%;
}
75%{
margin-left: 77%;
}
100%{
margin-left: 100%;
}
}
动画的调用（使用）
只需要使用animation-name:关键帧名；来使用即可
.box2{
width: 100px;
height: 100px;
background-color: orange;
animation-name: moveToRight;
animation-duration: 2s;
}animation也可以使用
- animation-duration定义动画时间，
- animation-delay设置延迟时间，
- animation-timing-function设置动画的时序函数
注意：动画不需要指定动画的属性，可以直接让他过渡。
演示代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style>
.box1{
width: 600px;
height: 600px;
background-color: grey;
overflow: hidden;
}
.box2{
width: 100px;
height: 100px;
background-color: orange;
animation-name: moveToRight;
animation-duration: 2s;
}
@keyframes moveToRight {
from{
margin-left: 0%;
}
to{
margin-left: 100%;
}
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
显示：（自动滑动，因为设置了100%，所以会直接滑动到外边，然后被overflow:hidden所隐藏）
animation-iteration-count（动画执行的次数）
可选值：
- N（常数，执行N次）
- inifinite（无数次）
animation-direction(动画执行的方向）
可选值：
- normal：每次从from到to（默认）
- reverse：每次都从to到from
- alternate：先from到to，然后再从to到from 反复
- alternate-reverse：从to到from，然后再从from到to 反复
animation-play-state（动画的执行状态）
可选值：
- running：动画执行（默认）
- paused：动画暂停
animation-fill-mode（动画的填充模式）
可选值：
- none：动画执行完毕回到原来位置（默认）
- forward：动画执行完毕，停止在动画结束的位置
- backwards：动画延时等待时，元素会处于开始位置
- both：结合了forward和backwards。
animation的简写
/*关键帧名为moveToRight*/
animation-name: moveToRight;
/*每次运动时常为2s*/
animation-duration: 2s;
/*移动三次*/
animation-iteration-count: 3;
/*延迟2s*/
animation-delay: 2s;
/*运动方向先from到to，然后再从to到from 反复*/
animation-direction: alternate;
/*动画执行完毕，停止在动画结束的位置*/
animation-fill-mode: forwards;
可以简写为:
animation: moveToRight 2s infinite 2s alternate forward;
