Question

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

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

Answer 2

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

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

＆＃13;

: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);
  }
}

＆＃13;

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

＆＃13;

Answer 3

尝试

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

CSS动画保留原始属性

3 个答案: