**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