109

完了後も 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>
4

5 に答える 5

195

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

https://developer.mozilla.org/en/CSS/animation-fill-mode

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

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

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

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

于 2012-03-19T17:26:29.197 に答える
1

私にも似たようなことがありました。アニメーション化された要素に position:relative を追加して修正しました。

于 2015-07-30T19:56:51.780 に答える