CSS3アニメーションの終了時に最終状態を維持する


301

opacity: 0;CSSで設定されているいくつかの要素でアニメーションを実行しています。アニメーションクラスはonClickに適用され、キーフレームを使用して、不透明度01(特に)に変更します。

残念ながら、アニメーションが終了すると、要素はopacity: 0(FirefoxとChromeの両方で)元に戻ります。私の自然な考え方は、アニメーション化された要素が最終的な状態を維持し、元のプロパティを上書きすることです。これは本当ではないですか?そうでない場合、どのようにして要素にそうさせることができますか?

コード(プレフィックスバージョンは含まれません):

@keyframes bubble {
    0%   { transform:scale(0.5); opacity:0.0; }
    50%  { transform:scale(1.2); opacity:0.5; }
    100% { transform:scale(1.0); opacity:1.0; }
}

1
私は自分のリピート通知を投稿します:stackoverflow.com/questions/9196694/css3-animation-scale少なくとも鉱山は、より多くの有益なタイトルを持っています!
ダン・

回答:


528

追加してみてくださいanimation-fill-mode: forwards;。たとえば、次のようになります。

-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;

1
そうだね。可能な場合は回答を確認します。CSSヘッドが必要とされている背後にあるロジックについてコメントしたい場合は、ぜひお知らせください。
ダン

8
animation-fill-modeプロパティについては、こちらをご覧ください-dev.w3.org/csswg/css3-animations/#animation-fill-mode-propertyよろしくお願いします。
Christofer Vilander 2012年

6
@Dan プロパティのforwards値により、animation-fill-modeアニメーションが終了した後、要素がアニメーションの最後のキーフレーム状態を保持するようになります。たとえば、アニメーションがwidth0から100pxに変更された場合、このプロパティにより、アニメーションの終了後も要素の幅が100pxのままになります。
Farzad YZ 2016

5
100% / toポイントを指定することを忘れないでください@keyframe。そうしないと機能しません。
Tomasz Mularczyk 2017年

animation-fill-mode:forwardsも私にとってトリックを実行しましたが、ルールに「!important」命令を追加した後にのみ
shayuna

26

より多くのアニメーション属性を使用している場合、略記は次のとおりです。

animation: bubble 2s linear 0.5s 1 normal forwards;

これは与える:

  • 2s 期間
  • linear タイミング関数
  • 0.5s ディレイ
  • 1 反復回数(無限にすることができます)
  • normal 方向
  • forwards 塗りつぶしモード(最終位置として終了位置を使用する互換性が必要な場合は、後方に設定します)

14

SHORT HAND VERSIONを使用しない場合:メイクは確かanimation-fill-mode: forwardsであるAFTERアニメーション宣言またはそれが動作しません...

animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;

animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;

1
あなたが正しい。私の答えを更新しました。ありがとう、それは私の心を滑らせました。
テイラーA.リーチ、

4

animation-fill-modeを使用し ます。

animation-fill-mode: forwards;

要素は、最後のキーフレームによって設定されたスタイル値を保持します(アニメーション方向とアニメーション反復回数に依存)。

注:@keyframesルールは、Internet Explorer 9以前のバージョンではサポートされていません。

実施例

div {
  width: 100px;
  height: 100px;
  background: red;
  position :relative;
  -webkit-animation: mymove 3ss forwards; /* Safari 4.0 - 8.0 */
  animation: bubble 3s forwards;
  /* animation-name: bubble; 
  animation-duration: 3s;
  animation-fill-mode: forwards; */
}

/* Safari */
@-webkit-keyframes bubble  {
  0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

/* Standard syntax */
@keyframes bubble  {
   0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}
<h1>The keyframes </h1>
<div></div>

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.