CSS animation 属性

CSS animation 语法

在 CSS 中，animation 属性用于定义元素的动画效果。animation 是一个复合（简写）属性，它允许你一次性定义一个或多个动画的所有单个属性。这些属性包括：

语法：

animation: 动画值1, 动画值2, ..., 动画值n;

说明：

animation 属性接受一个或多个动画值，动画值之间使用英文逗号隔开。每个动画值又包含一个或多个子属性的值（顺序不限，但通常建议按照易于阅读的顺序）。

对于每个动画值来说，尽管语法允许值的顺序很灵活，但为了代码的可读性和可维护性，建议遵循一个一致的顺序，例如：

[name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state]

在简写属性中，浏览器总是将第一个时间值解释为 animation-duration，第二个时间值（如果存在）解释为 animation-delay。因此，如果只需要延迟而不需要持续时间，或者需要两个时间值，顺序就变得很重要。例如：

animation: myAnim 2s; （2 秒是 duration）。
animation: myAnim 2s 1s;（2 秒是 duration，1 秒是 delay）。
animation: myAnim 1s 2s;（1 秒是 duration，2 秒是 delay）。

提示: 在实际开发中，如果涉及的动画属性比较多，我们更推荐使用子属性来设置动画，而不推荐使用 animation 这个复合属性。这是因为 animation 属性虽简洁，但容易造成顺序混淆，特别是在涉及多个时间值或复杂组合时。

CSS animation 摘要

属于	CSS 动画
使用频率	中
是否继承	否
默认值	各子属性的默认值
兼容性	查看
官方文档	查看
MDN	查看

CSS animation 示例

接下来，我们通过一个简单的例子来讲解一下 animation 属性是如何使用的。

示例：animation 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        @keyframes mytransform {
            0% { border-radius: 0; }
            50% { 
                border-radius: 50px; 
                transform: translateX(0); 
            }
            100% { 
                border-radius: 50px; 
                transform: translateX(200px); 
            }
        }
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        div:hover {
            animation: mytransform 1s linear;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

animation 示例

分析：

对于这个例子来说，animation: mytransform 1s linear; 这句代码等价于：

animation-name: mytransform;
animation-duration: 1s;
animation-timing-function: linear;