前言
html网页中的动画效果,可以使用CSS中“@keyframes”定义关键帧动画,也就是定义一些初始状态、中间状态、介绍状态,然后使用animation来完成动画的显示。首先来看一下animation有哪些可以设置的属性:
1、animation-name 动画名称
2、animation-duration 动画时间
3、animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)
4、animation-delay 动画延迟
5、animation-iteration-count 动画播放次数 n|infinite
6、animation-direction 动画结束后是否反向还原 normal|alternate
7、animation-play-state 动画状态 paused(停止)|running(运动)
8、animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)
以上的属性可以分别单独设置属性值,也可以通过下面的方式一起设置属性值:
animation:name duration timing-function delay iteration-count direction;同时设置多个属性。
下面我们来看一个具体的例子,比如,来实现一个数据加载时的缓冲效果,有时候会看到数据正在加载时显示出来的动画效果。
先来看一下静止时的状态,这五个颜色不一样的长条长度一致,开始前状态如下图: