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 表示等待期保持初始样式,完成期间保持最后一帧样式。