CSS animation - how to make a smooth return to the original position?

Question

css

Is there a way to make an animated object return to its original state smoothly when using looping animation with :hover? There are no problems with transition, but sharp jerks occur with animation.

Answer 1

alternate
or we make the animation not from 0 to 100% for example, but from 0 to 50% and then set the initial value to 100%
or you can hang the animation on the :hover state itself
in any case, it would be better with fidl

Answer 2

Look here: www.theappguruz.com/tag-tools/web/CSSAnimations

Answer 3

Set transition to default styles too

//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;
}