CSS animation — как сделать плавное возвращение на исходную позицию?

Question

[zwezew]

Есть способ сделать плавное возвращение анимированного объекта в исходное состояние при использовании цикличной анимации с :hover? С transition проблем нет, а с animation происходят резкие рывки.

Comments

[kulaeff]

Где код?

Answer 1

[cssfish]

alternate

либо анимашку делаем не от 0 к 100% например, а от 0 к 50% и затем на 100% ставим первоначальное значение

либо можно на само состояние :hover вешать анимацию

в любом случае, с фидлом было бы лучше

Answer 2

[Alexandr Alexandrov]

Посмотрите сюда: www.theappguruz.com/tag-tools/web/CSSAnimations

Comments

[zwezew]

Ресурс полезный, спасибо, но ответа это не дает - если убирать курсор, анимация на hover резко прыгает в исходное состояние.

[Alexandr Alexandrov]

А если пример кода на какой-нибудь codepen\jsfiddle выложить?
По ссылке выше есть примеры, которые можно пересмотреть и попробовать, например, другие варианты.

Answer 3

[Евгений Коелсник]

Поставь transition и на дефолтные стили

//hover next arrow
.banner-anim-arrow-default:hover.next:before,
.banner-anim-arrow-default:hover.next:after {
  left: 20px;
  transition: left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

//next arrow
.banner-anim-arrow-default.next:before,
.banner-anim-arrow-default.next:after {
  left: 0;
  transition: left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transform-origin: left;
}