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

Question

[Dvorak]

#main-button-one:hover, #main-button-two:hover {
  transition-duration: 0.4s;
  transform: translate(0,3px);
  cursor: pointer;
  opacity: 0.8;
}

Двигаю элемент с помощью CSS. Всё хорошо, но после того, как элемент сдвигается, он возвращается обратно, даже если на него ещё наведена мышка. А хотелось бы, чтобы он возвращался обратно только после убирания курсора. Как исправить?

Answer 1

[Сергей Горячев]

#main-button-one, #main-button-two {
  animation: forwards;
}

https://jsfiddle.net/at7pmty7/
Хотя странно, что у Вас не работает.
Вы не применяете animation, это всего лишь hover.
Да и на JSFiddle работает правильно без forwards.
Быть может ошибка в другом месте?

Comments

[Dvorak]

не работало из-за строчки display:inline. Не знаю, почему, но проблема именно в ней.

[Dvorak]

даже нет, проблема в другом. Данная анимация правильно срабатывает только с инлайновыми элементами

[Сергей Горячев]

Михаил Макарычев: естественно, блин, в ней. Вы ж не предоставили полный код. Инлайновые блоки не делаются 100% ширины же.

[Сергей Горячев]

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

Answer 2

[Aleksey Chernikov]

По моему всё и так хорошо работает.
Пример: https://jsfiddle.net/Ljs2cedv/