ANIMATION动画的学习小总结

	动画他的原理就是逐帧动画，把整个运动的过程分为100份，在这一百份里实现自己想要的画面。

基本的参数:
1.animation-name（设置一个动画的名字这个名字可以是自定义的）
2.animation-duration（动画的持续时间有两个单位 s秒>ms毫秒）
3.animation-delay (动画的延迟时间 也可以是负数当为负数时会抵消 animation-duration的时间)
4**.animation-iteration-count**（动画的重复次数，默认的就是1无限次是infinite）
5**.animation-timing-function**（动画的运动形式比较常用的ease（默认）linear匀速）
6.animation-fill-mode（规定动画播放之前或者之后动画是不是可见）none（默认值）backwards（在延迟的情况下让0%在延迟前生效）forwards（在运动结束后停到结束为位置）both（backwards.forwards同时生效）
7.animation-direction（定义是否应该轮流反向播放动画）
alternate（一次正一次反向），reverse（永远都反向）normal*（默认）。
@keyframes 动画的名字 { from{}
to{}
}（from起点位置等价于0% to终点位置等价于100%。默认情况下元素运动完会回到起始点位置）
也可以写成复合样式例如animation:4s（动画的时间） 2s（动画的延迟时间） linear（动画的运动状态）name（动画的名字）infinite（次数）forwards（运动后停到结束位置);

做一个小演示:

先做一个大盒子在做一个包含在盒子里的红方块，然后设置一个动画效果让红方块在盒子里上下左右移动。