web-dev-qa-db-ja.com

Webkit CSSアニメーションの問題-アニメーションの終了状態を保持しますか？

次の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のテキストは、期待どおりに100ピクセルのドロップダウンでアニメーション化します。ただし、アニメーションの最後で元の位置にジャンプして戻ります。

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

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

csscss3css-animations
70
Govan

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

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

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

-編集

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

32
robertc

-webkit-animation-fill-modeを使用して、終了状態を保持することができます（または開始状態を後方に拡張することもできます）。しばらく前にWebKitに追加され、iOS 4およびSafari 5で出荷されました。

-webkit-animation-fill-mode: forwards;
145
dino

ここに素晴らしい答えを追加するために、CSS3遷移を処理する jQuery Transit などのJavaScriptフレームワークを使用できます。

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

これは、必要なことを実現する非常にシンプルなワンライナーです。

Javascript：

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

JS Fiddle Demo

1
ROFLwTIME

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

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

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

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

0
Michael Mullany

これを行うもう1つの方法は、キックだけです。

    <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>
0
apaul