web-dev-qa-db-ja.com

アニメーション後のスタイルを維持するには？

次の研究に申し込むときに表示するポートフォリオで作業しています。私たちは2012年に住んでいるので、「私たちはこの男が必要だ」という感覚を与えるために、たくさんの派手なアニメーションとCSS3ジャンクがあります。現在、少し問題があります。

これは特定の要素のほんの一部です：

/* This is the CSS of the elements with the id called 'fadein' */
#fadein {
    -moz-animation-duration: 2s;
    -moz-animation-name: item;
    -moz-animation-delay: 4.5s;
    -webkit-animation-duration: 5s;
    -webkit-animation-name: item;
-webkit-animation-delay: 4.5s;
opacity:0;
-webkit-opacity:0;
}

@-webkit-keyframes item {
from {
-webkit-opacity: 0;
     }
to { 
-webkit-opacity: 1;
 }
}

Firefoxのキーフレームはまったく同じなので、省略したことに注意してください。正しい、醜いフォーマットのCSSで、「fadein」というIDを持つ要素をフェードインします。

問題は、アニメーションが終了すると、要素が再び消えることです。これは、醜いフォーマットのCssを使用できないCssに変えます。

アニメーション後に変更されたスタイルを維持する方法を知っている人はいますか？

この質問は以前に尋ねられたと思いますが、そうだとすみません。

htmlcsscss-animations
30
amees_me

試してください：

#fadein {
  -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;    /* FF 5+ */
  -o-animation-fill-mode: forwards;      /* Not implemented yet */
  -ms-animation-fill-mode: forwards;     /* IE 10+ */
  animation-fill-mode: forwards;         /* When the spec is finished */
}
58
methodofaction

Duopixelsの答えは正しい方法ですが、完全にクロスブラウザではありませんが、このjqueryプラグインはアニメーションコールバックを有効にし、コールバック関数で要素を好きなようにスタイルできます： https://github.com/krazyjakee/ jQuery-Keyframes

1
Jake Cattrall