Как задать плавность анимации при разных @keyframes на hover элемента?

Question

[ennet]

Всем привет! Подскажите пожалуйста, как сделать "плавность" анимации.

У меня есть @keyframes, который описывает поведение анимации при загрузки. А при ховере, подключается другой @keyframes (анимация и ее ход меняется).

Между их сменой происходит резкость.

Вот пример резкости jsfiddle.net/g4wvqrL8

Вопрос: как при разных @keyframes при ховере сделать плавную смену 2х типов анимация?

Пробовала делать transition (смещала их на нужную траекторию при ховере и начинать новую анимацию, но плавность все равно не было).

Или же как начинать анимацию с места, где остановилась анимация до этого??

Подскажите , всем заранее спасибо!

Answer 1

[Dexmaster]

Всего-то нужно на 0% и 100% анимации не делать смещения. И transition нужно использовать на ячейке анимацию которой нужно сгладить.
jsfiddle.net/Dexmaster/g4wvqrL8/1

Comments

[ennet]

Спасибо! А как все же сделать, чтобы при отмене hover/active он доходил до конца анимацию и так резко не обрывал ?

[Dexmaster]

transition...

[ennet]

Dexmaster: при @keyframes у меня transition не сработал, когда на элементе нет @keyframes, transition работает

[Dexmaster]

ennet: Работает просто transition только окончает действие, если нужно переместить элемент это нужно сделать сначала, а потом начать второе. (посмотри по ссылке у меня есть и transition и @keyframes в .icon-1)

[Dexmaster]

ennet: Здесь есть пример переходного действия jsfiddle.net/Dexmaster/g4wvqrL8/4 changePosition посмотри на animation-delay и порядок действий:

pull -> click -> changePosition(delay: 1s + play: 1s) && rotate360 (delay: 2s + play:4s*infinity)

changePosition имеет delay 1s чтобы куб остановился и перешёл в нужное место при помощи transition. (можешь сократить время transition и задержку можно сократить)

rotate360 имеет delay именно на эти 2 секунды и тогда начинает действовать

P.S. transition тоже нужно учесть, поэтому и делаются animation-delay

[Dexmaster]

ennet: Если ответ верный прошу обозначить как таков. Заранее спасибо )