动画属性详解

CSS 提供多个动画相关属性，用于细致控制动画行为。通常与 @keyframes 搭配使用。

1. 常用动画属性

属性名	说明	示例值
animation-name	指定使用的关键帧名称	slideMove
animation-duration	动画持续时间	2s, 500ms
animation-timing-function	动画节奏曲线	ease, linear, steps(4)
animation-delay	动画延迟时间	0s, 1s
animation-iteration-count	动画播放次数	1, infinite
animation-direction	播放方向	normal, reverse, alternate
animation-fill-mode	动画执行前后状态	none, forwards, backwards, both
animation-play-state	动画播放状态	running, paused

2. 简写属性

animation: slideMove 2s ease-in-out 0s infinite alternate;

等同于：

animation-name: slideMove;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;

动画属性详解示例

loading