css动画常用属性总结

transition 过渡动画,有4个属性

(1) transition-property:属性名称
(2) transition-duration: 间隔时间
(3) transition-timing-function: 动画曲线
(4) transition-delay: 延迟

animation 关键帧动画,有7个属性

(1) animation-name:动画名称
(2) animation-duration: 间隔时间
(3) animation-timing-function: 动画曲线
(4) animation-delay: 延迟
(5) animation-iteration-count:n | infinite;动画播放次数

(6) animation-direction: normal | alternate;
normal: 正常播放动画
alternate: 轮流反向播放动画,奇数次正向播放,偶数次反向播放

(7) animation-fill-mode:
none 表示 等待期和完成期,元素样式都为初始状态样式,不受动画定义(@keyframes)的影响。
both 表示 等待期样式为第一帧样式,完成期保持最后一帧样式。
backwards 表示等待期为第一帧样式,完成期跳转为初始样式
forwards 表示等待期保持初始样式,完成期间保持最后一帧样式。

posted @ 2020-05-11 20:19  全玉  阅读(933)  评论(0编辑  收藏  举报