keyframe - Stop padding left text animation

Question

I have this code to slide to left 10px my h2: It works but after the text is moved It returns to 0 padding left. How I can stop the animation?

Thanks.

.bg_slider:hover h2 {
      animation: myanim-in 3s 1;
}

 @keyframes myanim-in {
      50% {
      padding-left: 10px;
}  

question from:https://stackoverflow.com/questions/66062654/stop-padding-left-text-animation

Answer 1

You can use transition effects instead of animation.

I add a testable example below.

.bg_slider h2 {
  transition: 1s;
}

.bg_slider:hover h2 {
  padding-left: 10px;
}

<div class="bg_slider">
  <h2>Heading</h2>
</div>