CSS 动画保留原始属性答案

【问题标题】：CSS Animation Preserve Original PropertiesCSS 动画保留原始属性
【发布时间】：2018-07-02 05:44:43
【问题描述】：

我有这个以背景色开头的 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，但它具有不同的背景颜色。有没有一种方法可以为它设置动画，以便在不指定的情况下将过渡设置为原始背景颜色？

【问题讨论】：

标签： css less css-animations

【解决方案1】：

一个想法是在动画中只指定一种颜色，使其从 0% 到 x%，然后剩下的将是默认颜色：

.box {
  height: 150px;
  background: red;
  animation: anim 2s linear infinite;
}

.box-2 {
  height: 50px;
  background: black;
  animation: anim 2s linear infinite;
}

@keyframes anim {
  0%,
  20% {
    background: blue;
  }
}

<div class="box">

</div>
<div class="box-2">

</div>

【讨论】：

【解决方案2】：

试试

.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>

【讨论】：

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

【解决方案3】：

CSS 变量/Custom properties 可以做到这一点。

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

:root {
  --default: blue;
  --highlight: lightyellow;
}

div {
  width: 50%;
  margin: 1em auto;
  border: 1px solid grey;
  height: 50px;
}

.one,
.two {
  background: var(--default);
  animation: highlight 2.5s linear infinite;
}

.two {
  --default: red;
}

@keyframes highlight {
  from {
    background-color: var(--highlight);
  }
  to {
    background-color: var(--default);
  }
}

<div class="one"></div>

<div class="two"></div>

【讨论】：