☰

CSSアニメーションプロパティはアニメーション後も残ります質問する

tag-icon • tag-icon css css-animations
CSSアニメーションプロパティはアニメーション後も残ります質問する

CSS アニメーション プロパティを完了後も維持しようとしていますが、これは可能ですか?

私が達成しようとしているのはこれです...

要素は、ユーザーがページにアクセスしたときに非表示になり、3 秒後 (または任意の秒数後) にフェードインし、アニメーションが完了するとそこに留まる必要があります。

ここにフィドルの試みがあります...http://jsfiddle.net/GZx6F/

保存用のコードはこちらです...

<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>

ベストアンサー1

animation-fill-modeCSS3プロパティを探していると思います

https://developer.mozilla.org/en/CSS/アニメーション塗りつぶしモード

animation-fill-mode CSS プロパティは、CSS アニメーションが実行前と実行後にターゲットにスタイルを適用する方法を指定します。

あなたの目的のために設定してみてください

h2 {
  animation: fadeIn 1s ease-in-out 3s;
  animation-fill-mode: forwards;  
}

設定転送値「ターゲットは実行中に遭遇した最後のキーフレームによって設定された計算値を保持します」

おすすめ記事