Основная цель была такая:
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?