动画使元素逐渐从一种样式变为另一种样式。
您可以随意更改任意数量的 CSS 属性。
如需使用 CSS 动画,您必须首先为动画指定一些关键帧。
关键帧包含元素在特定时间所拥有的样式。
有下面的基本属性:
@keyframes:
如果您在 @keyframes 规则中指定了 CSS 样式,动画将在特定时间逐渐从当前样式更改为新样式。要使动画生效,必须将动画绑定到某个元素。
animation-duration:
animation-duration
属性定义需要多长时间才能完成动画。如果未指定 animation-duration
属性,则动画不会发生,因为默认值是 0s(0秒)。
在上面的例子中,通过使用关键字 "from" 和 "to"(代表 0%(开始)和 100%(完成)),我们设置了样式何时改变。
您也可以使用百分比值。通过使用百分比,您可以根据需要添加任意多个样式更改。
animation-delay:
延迟动画
animation-delay 属性规定动画开始的延迟时间
animation-iteration-count 属性指定动画应运行的次数,下面的例子使用值 "infinite" 使动画永远持续下去:
animation-direction:
属性指定是向前播放、向后播放还是交替播放动画。
animation-direction 属性可接受以下值:
- normal - 动画正常播放(向前)。默认值
- reverse - 动画以反方向播放(向后)
- alternate - 动画先向前播放,然后向后
- alternate-reverse - 动画先向后播放,然后向前
- 使用值 "alternate" 使动画先向前运行,然后向后运行:
animation-timing-function:
animation-timing-function 属性规定动画的速度曲线。
animation-timing-function 属性可接受以下值:
- ease - 指定从慢速开始,然后加快,然后缓慢结束的动画(默认)
- linear - 规定从开始到结束的速度相同的动画
- ease-in - 规定慢速开始的动画
- ease-out - 规定慢速结束的动画
- ease-in-out - 指定开始和结束较慢的动画
- cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值