突出显示元素，然后转换回原始颜色答案

【问题标题】：Highlight element then transition back to original color突出显示元素，然后转换回原始颜色
【发布时间】：2019-09-14 01:32:03
【问题描述】：

我有不同background-colors 的元素。单击链接时，我想用不同的颜色（黄色）突出显示元素，然后淡化回元素的原始颜色。我知道元素的color 有currentColor，但background-color 没有类似的东西。

如何从高亮颜色平滑过渡回元素的原始background-color？ 现在它从高亮颜色淡化为透明，然后在动画时突然跳回原始颜色结束。

:target td {
  animation: highlight 1s;
}

@keyframes highlight {
  from {
    background-color: yellow;
  }
  to {
  /* How do I set this back to the element's original background-color? */
    background-color: transparent;
  }
}

<ul>
  <li>
    <a href="#link1">Link #1</a>
  </li>
  <li>
    <a href="#link2">Link #2</a>
  </li>
    <li>
    <a href="#link3">Link #3</a>
  </li>
</ul>

<table>
  <tr id="link1">
    <td>This is Link #1</td><td>// Fine.</td>
  </tr>
  <tr id="link2">
    <td bgcolor="orange">This is Link #2</td><td>// Ugly.</td>
  </tr>
    <tr id="link3">
    <td bgcolor="red">This is Link #3</td><td>// Ugly.</td>
  </tr>
</table>

【问题讨论】：

如果曾经有一段时间“只使用 jQuery”是有效的...... :)
但是，哦！使用零外部库的乐趣！

标签： css css-transitions css-animations background-color

【解决方案1】：

另一种选择是在 50% 的动画上使用 background-color: initial - 请参阅下面的演示：

div {
  margin: 200px 0;
}

:target td {
  animation: highlight 2s;
}

@keyframes highlight {
  0% {
    background-color: yellow;
  }
  50% {
    background-color: initial;
  }
}

<ul>
  <li>
    <a href="#link1">Link #1</a>
  </li>
  <li>
    <a href="#link2">Link #2</a>
  </li>
    <li>
    <a href="#link3">Link #3</a>
  </li>
</ul>

<table>
  <tr id="link1">
    <td>This is Link #1</td><td>// Fine.</td>
  </tr>
  <tr id="link2">
    <td bgcolor="orange">This is Link #2</td><td>// Ugly.</td>
  </tr>
    <tr id="link3">
    <td bgcolor="red">This is Link #3</td><td>// Ugly.</td>
  </tr>
</table>

【讨论】：

哦，我喜欢这个主意。看起来它在 IE 11 中不起作用。

【解决方案2】：

只是不要为动画添加to。这是因为如果未定义结束（或开始）状态，浏览器将使用元素的现有样式（RE：Valid Keyframe Lists on MDN）

div {
  margin: 200px 0;
}

:target td {
  animation: highlight 1s;
}

@keyframes highlight {
  from {
    background-color: yellow;
  }
}

<ul>
  <li>
    <a href="#link1">Link #1</a>
  </li>
  <li>
    <a href="#link2">Link #2</a>
  </li>
    <li>
    <a href="#link3">Link #3</a>
  </li>
</ul>

<table>
  <tr id="link1">
    <td>This is Link #1</td><td>// Fine.</td>
  </tr>
  <tr id="link2">
    <td bgcolor="orange">This is Link #2</td><td>// Ugly.</td>
  </tr>
    <tr id="link3">
    <td bgcolor="red">This is Link #3</td><td>// Ugly.</td>
  </tr>
</table>

【讨论】：

【解决方案3】：

如果您只是从关键帧中删除 to，它将采用分配的背景颜色。

要了解它，请阅读 mdn doc 的这一部分 https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes#Valid_keyframe_lists

div {
  margin: 200px 0;
}

:target td {
  animation: highlight 2s;
}

@keyframes highlight {
  from {
    background-color: yellow;
  }
}

<ul>
  <li>
    <a href="#link1">Link #1</a>
  </li>
  <li>
    <a href="#link2">Link #2</a>
  </li>
    <li>
    <a href="#link3">Link #3</a>
  </li>
</ul>

<table>
  <tr id="link1">
    <td>This is Link #1</td><td>// Fine.</td>
  </tr>
  <tr id="link2">
    <td bgcolor="orange">This is Link #2</td><td>// Ugly.</td>
  </tr>
    <tr id="link3">
    <td bgcolor="red">This is Link #3</td><td>// Ugly.</td>
  </tr>
</table>

【讨论】：