突出显示元素，然后过渡回原始颜色

Question

我的元素具有不同的background-color。单击链接时，我要突出显示具有不同颜色（黄色）的元素，然后淡出为元素的原始颜色。我知道元素currentColor有color，但是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>

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

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

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