CSS动画保留原始属性

我有一个CSS动画，它以背景色开始，并过渡到原始背景色：

@high-light-white: #ffffff;
@high-light-yellow: #ede5d0;
@high-light-default: #dce1ea;
@high-light-duration: 10s;

.highlight-comment {
    -webkit-animation-name: highlight; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: @high-light-duration; /* Safari 4.0 - 8.0 */
    animation-name: highlight;
    animation-duration: @high-light-duration;
}
@keyframes highlight {
    from {
        background-color: @high-light-yellow;
    }
    to {
        background-color: @high-light-default;
    }
}

我的问题是，我有另一个元素，我想使用相同的CSS，但它有不同的背景颜色。是否有一种方法可以设置它的动画，以便在不指定它的情况下将过渡设置为原始背景色？

试试看

.div-with-original-background-color {
    background-color: blue;
}
.div-with-another-original-background-color {
    background-color: green;
}

@keyframes highlight {
    from {
        background-color: @high-light-yellow;
    }
    to {
        background-color: transparent;
    }
}

<div class="div-with-original-background-color">
    <div class="highlight-comment">
       Some Sweet comment...
    </div>
</div>

<div class="div-with-another-original-background-color">
    <div class="highlight-comment">
       foo
    </div>
</div>

带有原始背景色的

.div{
背景颜色：蓝色；
}
.div与另一种原始背景色{
背景颜色：绿色；
}
@关键帧高亮显示{
从{
背景色：@高浅黄色；
}
到{
背景色：透明；
}
}
一些甜蜜的评论。。。
福
CSS变量/可以做到这一点

相同的动画，具有相同的变量，但是该变量在运行时被编译，并且可以通过重新声明它在单个元素上进行更改


：根目录{
--默认值：蓝色；
--推荐理由：浅黄色；
}
div{
宽度：50%；
保证金：1em自动；
边框：1px纯灰；
高度：50px；
}
.1，
.二{
背景：var（--默认值）；
动画：高亮显示2.5s线性无限；
}
.二{
--默认值：红色；
}
@关键帧高亮显示{
从{
背景色：var（--高光）；
}
到{
背景色：var（--默认值）；
}
}
一个想法是在动画中只指定一种颜色，并将其从0%设置为x%，然后剩余颜色将成为默认颜色：


.box{
高度：150像素；
背景：红色；
动画：动画2线性无限；
}
.方框-2{
高度：50px；
背景：黑色；
动画：动画2线性无限；
}
@关键帧动画{
0%,
20% {
背景：蓝色；
}
}

背景颜色设置为透明颜色，而不是原始颜色：/@FelipeWagner然后用具有原始颜色的div将其包裹起来。