71

次のCSS3アニメーションがあるとします。

<style type="text/css" media="screen">

.drop_box {
  -webkit-animation-name: drop;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes drop {

  from {
    -webkit-transform: translateY(0px);
  }

  to {
    -webkit-transform: translateY(100px);
  }

}
</style>

<div class="drop_box">  
    Hello world
</div>

Hello Worldテキストは、期待どおりに100pxドロップダウンしてアニメーション化します。ただし、アニメーションの終了時に、元の位置にジャンプして戻ります。

明らかに、これはCSSlandでは理にかなっています。アニメーションが適用され、要素に作用しなくなったため、元のスタイルが有効になります。しかし、私には少し奇妙に思えます-確かに、要素を所定の位置にアニメーション化する場合、その配置が持続することを期待しますか？

変更されたプロパティを修正するために、アニメーションの最後にある要素にクラス名またはスタイルをタグ付けするためにJavascriptに頼る必要なしに、終了位置を「スティッキー」にする方法はありますか？トランジションが持続することは知っていますが、問題のアニメーション（例はデモンストレーションのみを目的としています）では、トランジションは必要なレベルの制御を提供しません。これがないと、複雑なアニメーションは、要素が元の状態に戻る循環プロセスにのみ役立つようです。

4

5 に答える 5

147

-webkit-animation-fill-modeを使用して、終了状態を永続化する（または開始状態を逆方向に拡張する）ことができます。しばらく前にWebKitに追加され、iOS4とSafari5で出荷されました。

-webkit-animation-fill-mode: forwards;
于 2010-08-08T01:45:26.030 に答える
33

クラスで終了状態を定義すると、例で必要なことを行う必要があります。

.drop_box {
    -webkit-transform: translateY(100px);
    -webkit-animation-name: drop;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 1;
}

しかし、いずれにしてもアニメーションがイベント ドリブンである場合は、最終的に JavaScript を少し使用する必要があります。最も簡単な方法は、終了状態を含むクラスの追加を、アニメーションの開始をトリガーするものにすることです。

- 編集

2012 年 4 月の WDで追加されたプロパティについては、dino の回答を参照してください。animation-fill-mode

于 2010-07-18T12:02:11.953 に答える
1

ここで素晴らしい答えを追加するために、CSS3トランジションを処理するjQueryTransitなどのjavascriptフレームワークを使用できます。

実行するトランジション/エフェクトの数によっては、すべてのエフェクトが含まれている大きなCSSファイルに追いつくよりも、コードをクリーンに保つためのより良いソリューションになる場合があります。

これはあなたが望むことを達成する非常にシンプルなワンライナーです：

Javascript：

$(".drop_box").transition({y: "+=100px"}, 2000);

JSフィドルデモ

于 2013-03-22T17:32:58.977 に答える
0

あなたが探しているのは次のとおりだと思います： 

0% {
  -webkit-transform: translateY(0px);
}

100% {
  -webkit-transform: translateY(100px);
}

これにより、適切な場所に配置されます。

于 2010-08-24T23:22:06.033 に答える
0

これを行うさらに別の方法は、キックのためだけに、

    <style type="text/css" media="screen">

.drop_box {
   position:absolute;
   top:100px;
  -webkit-animation-name: drop;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes drop {

  from {
  -webkit-transform: translateY(-100px);
  }

  to {
  -webkit-transform: translateY(0px);
  }

}
</style>

<div class="drop_box">  
Hello world
</div>
于 2013-03-24T16:33:56.713 に答える