css3动画属性有哪些

/* CSS3 动画属性示例 */

/* 1. animation-name: 指定动画的名称 */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* 2. animation-duration: 设置动画的持续时间 */
div {
    animation-name: example;
    animation-duration: 4s;
}

/* 3. animation-timing-function: 设置动画的速度曲线 */
div {
    animation-timing-function: ease-in-out;
}

/* 4. animation-delay: 设置动画开始前的延迟时间 */
div {
    animation-delay: 2s;
}

/* 5. animation-iteration-count: 设置动画的播放次数 */
div {
    animation-iteration-count: infinite;
}

/* 6. animation-direction: 设置动画播放的方向 */
div {
    animation-direction: alternate;
}

/* 7. animation-fill-mode: 设置动画在执行之前或之后，其样式值是否可见 */
div {
    animation-fill-mode: forwards;
}

/* 8. animation-play-state: 设置动画是否正在运行或暂停 */
div {
    animation-play-state: paused;
}

/* 综合使用多个动画属性 */
div {
    animation-name: example;
    animation-duration: 4s;
    animation-timing-function: ease-in-out;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    animation-play-state: running;
}

解释说明：

• animation-name: 定义动画的名称，通常与 @keyframes 规则配合使用。
• animation-duration: 定义动画完成一个周期所需的时间。
• animation-timing-function: 定义动画的速度曲线（例如线性、加速、减速等）。
• animation-delay: 定义动画开始前的延迟时间。
• animation-iteration-count: 定义动画播放的次数，可以是具体的数字或 infinite 表示无限循环。
• animation-direction: 定义动画播放的方向（正常、反向、交替等）。
• animation-fill-mode: 定义动画在执行之前或之后，其样式值是否可见。
• animation-play-state: 定义动画是否正在运行或暂停。

这些属性可以单独使用，也可以组合在一起以创建复杂的动画效果。