css-animations - 停止填充左侧文本动画

Question

我有这个代码向左滑动 10px 我的 h2：它可以工作，但是在移动文本后它返回到 0 填充左边。我怎样才能停止动画？

谢谢。

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

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

标签： css-animationskeyframe

Answer 1

您可以使用过渡效果而不是动画。

我在下面添加了一个可测试的示例。

.bg_slider h2 {
  transition: 1s;
}

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

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