Обратная анимация CSS (изменение цвета) при наведении и убирании курсора

Question

Основная цель была такая:
cоздать анимацию для блока, чтобы при наведении на него курсора блок менял цвет дважды и сохранял последний цвет анимации, а после отведения курсора - менял цвета в обратном порядке и возвращался в исходное состояние. Всё это хотел реализовать только средствами html и css.

Сначала решил использовать transition, но там, как я понял, цвет можно изменить только 1 раз (зато в обратную сторону переход работает).

Потом попробовал сделать анимацию с помощью animation и @keyframes, получилось уже ближе к тому, что я хотел:

div {
  width: 100px;
  height: 100px;
  background-color: black;
  border-radius: 10px;
}

div:hover {
  animation: ch-color-1 3s forwards;
}

@keyframes ch-color-1 {
  from {
    background-color: black;
  }
  50% {
    background-color: blue;
  }
  to {
    background-color: yellow;
  }
}

<div>
</div>

Только вот после отведения курсора, как со свойством transition, обратная анимация не выполняется.

Затем я добавил ещё 1 правило для обратной анимации изменения цвета, уже почти получилось то, что я хотел, но анимация теперь начинается сразу же после загрузки или обновления страницы, а мне это не нужно:

div {
  width: 100px;
  height: 100px;
  background-color: black;
  border-radius: 10px;
  animation: ch-color-2 3s forwards;
}

div:hover {
  animation: ch-color-1 3s forwards;
}

@keyframes ch-color-1 {
  from {
    background-color: black;
  }
  50% {
    background-color: blue;
  }
  to {
    background-color: yellow;
  }
}

@keyframes ch-color-2 {
  from {
    background-color: yellow;
  }
  50% {
    background-color: blue;
  }
  to {
    background-color: black;
  }
}

<div>
</div>

Можно ли как-то убрать начальную анимацию при загрузке страницы, и есть ли аналогичные и более простые способы реализовать данную анимацию средствами html и css, либо же всё-таки для этого нужен JavaScript?

Answer 1

Как вариант, можно воспользоваться псевдоэлементом, который будет перекрывать блок на время первой анимации при загрузке страницы. Вот пример:

div:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: black;
  animation: height 3s;
}

@keyframes height {
  0% {
    height: 100%;
  }
  99.99% {
    height: 100%;
  }
  100% {
    height: 0;
    display: none;
  }
}

div {
  position: relative;
  overflow: hidden;
  width: 100px;
  height: 100px;
  background-color: black;
  border-radius: 10px;
  animation: ch-color-2 3s forwards;
}

div:hover {
  animation: ch-color-1 3s forwards;
}

@keyframes ch-color-1 {
  from {
    background-color: black;
  }
  50% {
    background-color: blue;
  }
  to {
    background-color: yellow;
  }
}

@keyframes ch-color-2 {
  from {
    background-color: yellow;
  }
  50% {
    background-color: blue;
  }
  to {
    background-color: black;
  }
}

<div></div>

Answer 2

Основная цель была такая: Создать анимацию для блока, чтобы при наведении на него курсора блок менял цвет дважды и сохранял последний цвет анимации, а после отведения - менял цвета в обратном порядке и возвращался в исходное состояние.

Обдумайте вариант использования анимации SVG. Поддержка её расширяется
SVG ведёт себя, как обычный блок, к которому применимы правила CSS. Кроме того, svg можно обернуть в родительский контейнер div class="container" и сделать приложение адаптивным, которое будет полностью заполнять родительский блок и не мешать другим элементам вёрстки.

Кроме того сравните краткость кода решения SVG по сравнению с анимацией CSS.
На более сложных примерах эта разница будет ещё более ощутимой.

.container {
width:20vw;
height:20vw;
cursor:pointer;
}

<div class="container">
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet">  

<rect width="100%" height="100%" rx="10" fill="black" >
   <!-- Анимация изменения цвета при наведении курсора -->
  <animate attributeName="fill" begin="svg1.mouseover" dur="1s" calcMode="discrete" values="black;blue;yellow" fill="freeze"  /> 
      <!-- Анимация изменения цвета при уводе курсора -->
  <animate attributeName="fill" begin="svg1.mouseout" dur="1s" calcMode="discrete" values="yellow;blue;black" fill="freeze"  />
</rect>
</svg>   
</div>

Приложение адаптивно и работает во всех современных браузерах включая Edge

БЛОГ НА HUSL

Обратная анимация CSS (изменение цвета) при наведении и убирании курсора

Ответы (2 шт):