Как заставить css-анимацию выполняться до конца?

Question

[Денис Букреев]

Такие дела.

:hover { transition: 1s ease-out 1s }
Данный CSS обрабатывается так, что если во время анимации элемента убрать с него мышь, то он застынет в одном состоянии на 1с и только потом вернется в нативное состояние. Это выглядит отвратно.

Как сделать так, чтобы либо анимация до конца выполнялась, либо, если она не завершилась, не было задержки на 1с?

Answer 1

[iBird Rose]

ставить анимацию не на hover а на сам элемент

Comments

[Денис Букреев]

не понял что-то

[Kovalsky]

Денис Букреев: ты определяешь transition только по ховеру. Transition должен быть установлен до того, как произойдет изменение анимируемых свойств.

div {
  transition: all 1s;
  height: 20px;
}
div:hover {
  height: 40px;
}

[Kovalsky]

Денис Букреев: то есть не должен, но в твоём случае проблема из-за этого. Также можно использовать собственно анимацию, тоже приятней будет, @keyframes

[Денис Букреев]

Никита Полевой: не очень понятен ответ с кодом.
у меня в обоих случаях transition указан
Для элемента быстрый и с задержкой, чтобы элемент быстро возвращался в прежнее состояние
Для ховера более медленный и без задержки, чтобы элемент медленне превращался и оставался в таком состоянии некоторое время.

В указанном коде будет так, что при наведении добавится задержка, при этом моя проблема не решается

А вот кейфреймы я думаю как внедрить

[Алексей Струков]

Денис Букреев: выложи полностью код с ховером и без. Скорее всего надо убрать задержку у элемента без ховера

[Денис Букреев]

Алексей Струков: мне нужна задержка, так что ее нигде не надо убирать
решил проблему скриптом

[Алексей Струков]

Задержка у тебя будет перед ховером если убрать в базовом стиле задержку, ну и наоборот