CSS 动画

动画图

设置动画属性

动画时间函数 animation-timing-function
动画方向 animation-direction
动画填充模式 animation-fill-mode
动画播放状态 animation-play-state

定义关键帧序列

关键帧时间节点

%
%
%
%
%
%

关键帧0%

关键帧20%

关键帧40%

关键帧60%

关键帧80%

关键帧100%

速写法

animation: 模拟动画动画名称 animation-name 0s动画持续时间 animation-duration ease动画时间函数 animation-timing-function 0s动画延迟 animation-delay 1动画迭代计数 animation-iteration-count normal动画方向 animation-direction none动画填充模式 animation-fill-mode running;动画播放状态 animation-play-state