HTML5+CSS关于动画的技术分享

                     **HTML5+CSS关于动画的技术分享**

animation动画
原理：足帧动画，会把整个运动过程，划分成100份

常见属性：
animation-name : 设置动画的名字(自定义的)
animation-duration : 设置动画的持续时间
animation-delay : 动画的延迟时间
animation-iteration-count : 动画的重复次数，默认是1，infinite无限次数
animation-timing-function : 动画的运动时间
ease linear

配合使用：
@keyframes 动画的名字{
from{}
to{}
}

其中，from是起点位置，等价于0% to是终点位置，等价于100%
注：默认情况下，元素运动完毕后，会停到起始位置

复合样式：
animation-fill-mode : 规定动画播放之前或之后，其动画效果是否可见。
none (默认值) : 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
backwards : 在延迟的情况下，让0%在延迟前生效
forwards : 在运动结束的之后，停到结束位置
both : backwards和forwards同时生效

animation-direction : 属性定义是否应该轮流反向播放动画。
alternate : 一次正向(0%_{100%)，一次反向(100%}0%)
reverse : 永远都是反向 , 从100%~0%
normal (默认值) : 永远都是正向 , 从0%~100%

附：animation.CSS
一款强大的预设css3动画库。
官网地址：https://daneden.github.io/animate.css/

简单案例：(loding的动画制作)
效果图如下：

分享CSS部分原码如下：

                                                           逆战班——  梁伟
                                                                 2020.02.23