动画

# 过渡

# transition-property

transition-property: none | <过渡作用属性>,#

• all：全部属性 默认值
• <property>：属性名

# transition-duration

transition-duration: <过渡持续时间>,#

• 时间值

# transition-timing-function

transition-timing-function: <过渡缓动方式>,#

• linear：匀速
• ease：开始和结束慢 默认值
• ease-in：开始慢
• ease-out：结束慢
• ease-in-out：开始和结束更慢
• step-start：= steps(1, start)
• step-end：= steps(1, end)
• cubic-bezier() 函数
• steps() 函数

# transition-delay

transition-delay: <过渡延迟时间>,#

• 时间值

# transition

transition: [<transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>,]#

# 动画

# animation-name

animation-name: none | <动画名>,#

• 文本值

# animation-duration

animation-duration: <动画持续时间>,#

• 时间值：0s 默认值

# animation-timing-function

transition-timing-function: <动画缓动方式>,#

• linear：匀速
• ease：开始和结束慢 默认值
• ease-in：开始慢
• ease-out：结束慢
• ease-in-out：开始和结束更慢
• step-start：= steps(1, start)
• step-end：= steps(1, end)
• cubic-bezier() 函数
• steps() 函数

# animation-delay

animation-delay: <动画延迟时间>,#

• 时间值：0s 默认值

# animation-iteration-count

animation-iteration-count: <动画播放次数>,#

• 数值：1 默认值
• infinite：无限

# animation-direction

animation-direction: <动画方向>,#

• normal：单向 默认值
• alternate：双向

# animation-fill-mode

animation-fill-mode: <填充模式>,#

• none：无 默认值
• forwards：动画结束后，保持结束关键帧的样式
• backwards：动画开始前（存在延迟），保持开始关键帧的样式
• both：forwards + backwards

# animation-play-state

animation-play-state: <播放状态>,#

• running：播放中 默认值
• pause：暂停

# animation

animation: [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-fill-mode> || <animation-play-state>,]#