css3 простая анимация с трансформацией и переходом, внезапный скачок при завершении?

Question

У меня есть простая анимация, подобная этой:

.elem:hover {
-webkit-transform: scale(1.3);
-webkit-transition: all .4s;
}

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

Как мне это исправить?

Answer 1

Вы немного ошиблись, вы должны установить атрибуты немного по-другому:

.elem { -webkit-transition: all .4s ease-in-out; }
.elem:hover { -webkit-transform: scale(1.3); }

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

Рабочий пример (только для браузеров Webkit) .