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

Question

我的元素具有不同的 background-color。单击链接时，我想用不同的颜色(黄色)突出显示元素，然后淡化回元素的原始颜色。我知道元素的 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>

Answer 1

只是不要为动画包含一个to。这是可行的，因为如果未定义结束(或开始)状态，浏览器将使用元素的现有样式(回复: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>