停止左填充文本动画

Question

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

谢谢。

.bg_slider:hover h2 {
animation: myanim-in 3s 1;
}
@keyframes myanim-in {
50% {
padding-left: 10px;
}  

Answer 1

你可以用过渡效果代替动画。

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

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

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