如何通过继承让CSS元素同时拥有rotate1与animate1动画？

默认情况下，animation 属性是非继承属性，且当同一元素被多个优先级相同的选择器设置 animation 时，后声明的规则会覆盖先声明的。所以同时拥有.item和.icon类的元素，只会应用.main .icon里的rotate1动画。以下是两种可行的继承方案：

方案1：使用inherit关键字合并动画 #

直接在.main .icon的animation属性中，先通过inherit强制继承.item的动画配置，再追加自身的动画，用逗号分隔多个动画声明：

.main .icon {
  animation: inherit, rotate1 2s infinite;
}

这种方式简单直接，能让元素同时运行继承来的animate1和自身的rotate1动画。

方案2：使用CSS变量（更适合多场景复用） #

如果页面存在大量不同时长、不同配置的动画，CSS变量的方式更灵活，无需频繁修改.icon的基础规则：

1. 在.main .item中定义存储动画的CSS变量：

.main .item {
  --item-animation: animate1 2s infinite;
  animation: var(--item-animation);
}

2. 在.main .icon中引用该变量，同时追加自身动画：

.main .icon {
  animation: var(--item-animation), rotate1 2s infinite;
}

这种方式的优势在于，当需要给不同的.item子类设置差异化动画时，只需修改对应的CSS变量即可，.icon的规则完全不用改动：

/* 示例：给某类item设置长时长动画 */
.main .item.long-duration {
  --item-animation: animate1 5s infinite;
}

此时同时拥有.item.long-duration.icon的元素，会自动应用5s的animate1动画+rotate1动画，适配性极强。

验证代码（以方案2为例） #

<head>
    <style>
        .main .item {
            --item-animation: animate1 2s infinite;
            animation: var(--item-animation);
        }

        .main .icon {
            animation: var(--item-animation), rotate1 2s infinite;
        }

        @keyframes animate1 {
            0%   { transform: scale(1) }
            100% { transform: scale(1, 1.5) }
        }
        @keyframes rotate1 {
            0%   { transform: rotate(0deg) }
            100% { transform: rotate(-5deg) }           
        }
    </style>
</head>
<body>
<div class="main">
    <div class="item">test 123</div>
    <div class="item">test 456</div>
    <div class="item icon">icon!</div>
</div>
</body>

运行后，.item.icon元素会同时执行缩放和旋转动画。

内容的提问来源于stack exchange，提问作者Asaf