CSS-анимация, затухание в фоновом режиме при наведении, пребывание и возврат к предыдущему после задержки

Question

Допустим, у меня есть элемент HTML, красный с прозрачностью. Когда я нахожу элемент, он должен стать сплошным красным. Когда я перестаю парить элемент, он должен вернуться в первое состояние, но только через X секунд.

Пока все хорошо, см. Фрагмент кода.

Моя проблема в том, что я перестаю парить элемент, а затем вернусь к его зависанию. Начальная анимация начинается снова, но у нее нет анимации, а начальное состояние еще не началось, и поэтому есть уродливый прыжок с полного цвета на прозрачность, а затем исчезает до полного цвета.

Есть ли способ решить эту проблему без JavaScript?

Затем, установив фон div на полный цвет, цвет не сохраняется. Но он также устанавливает его на исходный цвет. Как я могу это решить? Удаление его удаляет только цвет, когда он не витает!

Непрозрачность с переходом не является вариантом, так как у меня есть контент внутри этого div.

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: rgba(50, 60, 95, 1); 
 
    animation-name: fadeItOut; 
 
    animation-duration: 1s; 
 
    animation-delay: 2s; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
div:hover { 
 
    animation-name: fadeItIn; 
 
    animation-duration: 1s; 
 
    animation-delay: 0s; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
@keyframes fadeItIn { 
 
    0% { 
 
    background: rgba(50, 60, 95, 0.3); 
 
    } 
 
    100% { 
 
    background: rgba(50, 60, 95, 1); 
 
    } 
 
} 
 

 
@keyframes fadeItOut { 
 
    0% { 
 
    background: rgba(50, 60, 95, 1); 
 
    } 
 
    100% { 
 
    background: rgba(50, 60, 95, 0.3); 
 
    } 
 
}

<div></div>

Answer 1

Я думаю, что вы можете иметь сложные вещи с помощью animation когда transition был бы лучшим вариантом. У анимаций есть начальная и конечная точки (ключевые слова и 100%), поэтому, когда вы наводите или выходите, элемент сначала устанавливается в состояние как на ключевой кадр (поскольку направление анимации является нормальным), а затем переходит к ключевому кадру 100% , Когда вы быстро или быстро наведете (до того, как предыдущая анимация будет завершена), вы всегда будете видеть эти прыжки из-за установки реквизитов ключевого кадра .

Ниже должно быть то, что вам нужно:

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: rgba(50, 60, 95, 0.3); 
 
    transition-property: background; 
 
    transition-duration: 1s; 
 
    transition-delay: 2s; 
 
} 
 
div:hover { 
 
    background: rgba(50, 60, 95, 1); 
 
    transition-delay: 0s; 
 
}

<div></div>

Answer 2

Ваш код просто работает.

Этот «ужасный» эффект, как вы сказали, только потому, что вы наведете элемент перед анимацией fadeOut.

Попробуйте просто уменьшить задержку анимации в DIV так:

div { 
    width: 100px; 
    height: 100px; 
    background: rgba(50, 60, 95, 1); 
    animation-name: fadeItOut; 
    animation-duration: 1s; 
    animation-delay: 1s; 
    animation-fill-mode: forwards; 
} 

Это скрипку я сделал для пусть вы его видите: https://jsfiddle.net/oqyep7tt/

По крайней мере то, как Гарри является способ лучше, чем это.

Answer 3

Попробуйте

div { 
    width: 100px; 
    height: 100px; 
    background: rgba(50, 60, 95, 1); 
    transition: background 300ms; 
    animation-name: fadeItOut; 
    animation-duration: 1s; 
    animation-delay: 0s; 
    animation-fill-mode: forwards; 
} 

div:hover { 
    animation-name: fadeItIn; 
    animation-duration: 1s; 
    animation-delay: 0s; 
    animation-fill-mode: forwards; 
} 

@keyframes fadeItIn { 
    0% { 
    background: rgba(50, 60, 95, 1); 
    } 
    100% { 
    background: rgba(50, 60, 95, 0.3); 
    } 
} 

@keyframes fadeItOut { 
    0% { 
    background: rgba(50, 60, 95, 0.3); 
    } 
    100% { 
    background: rgba(50, 60, 95, 1); 
    } 
} 

демо - https://jsfiddle.net/rye2gnp3/