通过@keyframes规则,可以创建动画
原理: 将一套css样式逐渐变为另一套css样式
用法:以百分比或“from”、“to”关键字来控制动画开始和结束。在动画过程中,可以多次改变这套css样式
animation是一个简写的属性,主要用于设置6个动画属性:
-
animation-name:需要绑定到选择器上的keyframe的名字
-
animation-duration:完成动画所花费的时间(s、ms)
-
animation-timing-function:动画的速度曲线
-
animation-delay:动画开始之前的延迟,允许负值,-2s使动画马上开始,但是跳过2s进入动画
-
animation-interation-count:动画应该播放的次数,几次或无数次 (n、infinite)
-
animation-direction:是否轮流反向播放动画,正常播放、轮流反向播放(normal、alternate)
animation-timing-function可能的值:
linear | 动画从头到尾的速度都是相同的(匀速) |
---|---|
ease | 默认。动画以低速开始,中间加快,在结束前又变慢 |
ease-in | 动画以低速开始 |
ease-out | 动画以低速结束 |
ease-in-out | 动画以速度开始以低速结束 |
cubic-bezier(n,n,n,n) | 自定义值,可能的值为0到1之间的数字 |