属性 | 描述 |
---|---|
@keyframes | 定义动画 |
animation | 所有动画属性的简写属性,除了animation-play-state |
animation-name | 规定@keyframes动画的名称 |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒,默认是0 |
animation-time-function | 规定动画速度曲线,默认是“ease” |
animation-delay | 规定动画何时开始,默认是0 |
animation-iteration-count | 规定动画被播放的次数,默认是1,还有infinite |
animation-direction | 规定动画是否在下一周期你想播放,默认是“nomal”,还有“pause” |
animation-fill-mode | 规定动画结束后的状态,保持forward回到起始backwards |
animation-play-state | 规定动画是否正在运行或暂停,默认是“running”,还有“paused” |
animation-time-function:规定动画的额速度曲线,默认是“ease”。
值 | 描述 |
---|---|
linear | 动画从头到尾的速度是相同的,匀速 |
ease | 默认。动画以低速开始,然后加快,再低速减慢 |
ease-in | 动画以低速开始 |
ease-in-out | 动画以低速开始和结束 |
steps | 指定了时间函数中的间隔数量(步长) |
动画复合写法:
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反向 动画起始或者结束的状态
animation:move 5s linear 2s 1 alternate forwards;