如何实现动画结束后保留样式？

实现动画结束后保留样式

问题：

如何在 html 和 css 中实现动画执行后，保留动画后的样式，而不是回到动画执行前的初始状态？

解答：

通常情况下，动画结束后会回到初始状态，因为 css 动画默认执行完后会还原样式。要保留动画最后的样式，可以将动画结束的属性设置为初始属性：

• html 和 css 代码：

...
<style>
  .box {
    /* 初始属性（动画结束后的样式） */
    left: -70px;
    opacity: 1;
    transition: all 1s; /* 启用 css 过渡效果 */
  }
  ...
</style>
...

• javascript 代码：

$('.btn-out').click(function() {
  $('.box-out').addClass('out');
});

$('.btn-in').click(function() {
  $('.box-in').addClass('in');
});

在此，我们使用了 css 过渡效果，在动画执行期间平滑地改变元素的属性。通过将动画结束的样式设置为初始样式，并在 javascript 中触发动画，可以在动画结束后保留样式。

以上就是如何实现动画结束后保留样式？的详细内容，更多请关注其它相关文章！