37

私はポートフォリオで働いて、次の研究にいつ応募するかを示しています。私たちは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で、IDが「fadein」の要素をフェードインさせます。

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

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

私はこの質問が以前に尋ねられたと思います、そしてもしそうなら私はそれについてかなり申し訳ありません。

4

2 に答える 2

69

試してみてください：

#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 */
}
于 2012-02-03T15:30:35.823 に答える
1

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

于 2012-07-15T17:52:54.647 に答える