动画模块

1.过渡和动画之间的异同
不同点：过渡必须人为的触发才会执行动画，而动画不需要人为的触发就执行动画。

相同点：过渡和动画都是用来给元素添加动画的，过渡和动画都是系统新增的一些属性，过渡和动画都需要满足三要素才会有动画效果。
动画三要素：
1.告诉系统要执行的动画
animation-name: xx;
2.告诉系统我们需要自己创建一个名称叫xx的动画
@keyframes xx {
from {
margin-left:0;
}
to{
margin-left:500px;
}
}
这里也可以使用百分之几到百分之几代替from to来定义。
3.动画持续时长
animation-duration:2s;

动画连写的格式
animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画；
简写格式：animation:动画名称 动画时长；

/* 动画执行次数 / animation-iteration-count: 3; / 动画是否往返 / animation-direction: alternate; / 告诉系统动画执行的速度 */ animation-timing-function: linear;/控制动画的执行状态:paused终止 running执行/ animation-play-state: paused;

无缝滚动的原理：在原有图片末尾再多出前面一两张图片，就可以在视觉上不会有跳转效果。