I faced the problem that when you hover on a div, the h4 embedded in it should move to the left, and when you remove the mouse, you will have to return back smoothly. The beginning of the animation works norms, but back a sharp jump back, how can this be fixed?

.wrapper { width: 250px; height: 250px; background: orange; margin: 0 auto; position: relative; } .wrapper h4 { width: 100%; text-align: center; position: absolute; top: 25%; } .wrapper:hover h4 { -webkit-animation: head .5s; animation: head .5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @keyframes head { from { right: 0; } to { right: 35%; } } 
 <div class="wrapper"> <h4>Hello</h4> </div>

    1 answer 1

     .wrapper { width: 250px; height: 250px; background: orange; margin: 0 auto; position: relative; } .wrapper h4 { width: 100%; text-align: center; position: absolute; top: 25%; -webkit-animation: in .5s; animation: in .5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .wrapper:hover h4 { -webkit-animation: out .5s; animation: out .5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @keyframes in { from { right: 35%; } to { right: 0; } } @keyframes out { from { right: 0; } to { right: 35%; } } 
     <div class="wrapper"> <h4>Hello</h4> </div>

    • Why use two animations for this? One can not achieve this effect? - Vadim Ovchinnikov
    • it is possible and one, but the question sounded, about a smooth return back, it was meant to make the return function in CSS - L. Vadim
    • I don't understand why in this case the animation-fill-mode doesn't work: forwards; poidei should have been 1 animation well and animation-fill-mode to return back but it does not work, can you explain why this is happening? - Dima