动画后仍保留CSS动画属性怎么办?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (121)

我试图在完成后获得一个CSS动画属性,这有可能吗?

当用户降落在页面上时,元素应该被隐藏,3秒后(或其他什么),它应该会消失,一旦动画完成,它应该停留在那里。

这是我的代码:

<h2>Test</h2>

<style>
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.9;
    }
}

h2 {
    animation: fadeIn 1s ease-in-out 3s;
}
</style>

我知道怎么用jQuery.就像这样.

<h2>test</h2>

<script>
  $(document).ready(function(){
    $('h2').hide().delay(3000).fadeIn(3000)
  });
</script>
提问于
用户回答回答于

我想你是在找animation-fill-mode

为了你的目的,就试着

h2 {
  animation: fadeIn 1s ease-in-out 3s;
  animation-fill-mode: forwards;  
}
用户回答回答于

你可以应用animation-fill-mode forwardsanimation。因此,以下几点也应有效:

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.9;
  }
}

h2 {
  opacity: 0;
  animation: fadeIn 1s ease-in-out 3s forwards;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h2>Test</h2>

扫码关注云+社区

领取腾讯云代金券