animation-duration： 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function： 规定动画的速度曲线。
animation-delay：规定在动画开始之前的延迟。
animation-iteration-count： 规定动画应该播放的次数。
animation-direction：规定是否应该轮流反向播放动画。
@keyframes{
}
给每个动画及暂停分配时间，按照总时间的百分比分配；
以三张图片为例制作轮播图，若将最后的数值设置为100%，出现问题在于最后一张到第一张的切换没有动画；尝试给最后一张图片到第一张图片的动画时间，但是中间的切换效果是从最后一张向右滑动直到显示出第一张图，其效果反人类，不美观；但是，通过尝试在最后的一张图片后面在添加一张与第一张相同的图片，可实现循环的效果；
方法与一中大致相同，唯一更改的地方是css3的@keyframes规则里面的内容
若只将要显示的三张图片导入，会出现最后一张图片到第一张图片没有动画效果；通过尝试在最后的一张图片后面在添加一张与第一张相同的图片，可实现循环的效果；
问题在于图片一直处于切换状态，中间没有停顿；
肯定是做2张同样的第一张图片的，做的不好的视觉上会认为有退回去的感觉，那是没有理解这个循环的本质，在css里，计算机不会把这些图片看成桶状去循环，图片永远是平面的，所以第一张图片过渡时间+最后一张图片过渡时间=其他任意一张图片的过渡时间，这样衔接才完美，由于人眼的视觉停留错位差，你不能让图片过渡时间过长，每个人的视觉停留时间是不一致的，你可以自己设定你认为的时间，比如5张图片5秒循环完，也就是duration设置5s，必须设置direction，速度曲线根据自己喜好设，没有动感的过渡是不完美的网页中使用gif动态图时，部分IE浏览器会出现动画不流畅的效果，体验很不好。故可以考虑使用CSS3 animation来控制动画播放，避免使用gif动态图。其实际原理为，把动态图拼接成当行排列的雪碧图，通过CSS3 animation控制雪碧图的移动速度，进而模拟gif的图片播放效果。
