Выделите элемент, затем вернитесь к исходному цвету

У меня есть элементы с разными background-colors. При нажатии на ссылку я хочу выделить элемент другим цветом (желтым), а затем вернуться к исходному цвету элемента. Я знаю, что для элемента 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>

Если бы когда-нибудь было время, когда «просто используйте jQuery» было бы правильным… :)

— 25.04.2019 00:08

Но, о! радости работы с нулевыми внешними библиотеками!

— 25.04.2019 00:23

css css-transitions css-animations background-color

24.04.2019 19:14

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

630

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Только не добавляйте to к анимации. Это работает, потому что если конечное (или начальное) состояние не определено, браузер будет использовать существующие стили элемента (RE: Допустимые списки ключевых кадров на 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>

24.04.2019 19:22

если вы просто удалите 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>

24.04.2019 19:26

Другой вариант — использовать background-color: initial на 50% анимации — см. демо ниже:

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.

— 24.04.2019 19:45

24.04.2019 19:26