2016-05-20 4 views
0

私は画像にショーのようなデザインを持っているレールアプリに取り組んでいます 4点があります。 (最初のポイントが表示されたように、第二の点よりなど)がアニメーションの弾丸は、他のものの後に来るように

this image

私は決してこのように働いていなかったので、私はこれを行う方法を知りません。

私はアニメーションに関するチュートリアルをいくつか見ていました。私が見つけたのは、ボックスを移動して色を変えるようなものでした。

私を正しい方向に親切に案内します。

答えて

0

、あなたの<head>でCSSファイルをインクルードあなたはstagger.css

http://digitalfio.github.io/Stagger.css/

のようなものでこれを達成することができますステップ

<div style="width:100px;height:100px;overflow:hidden;"> 
    <img src="yourimage" /> 
</div> 
+0

私はこれを説明する言葉が見つからないのです。 しかし、私はこれがアニメーションではありません –

1

でJavaScriptのステップを使用してのdivの幅を増やしてアニメーションを適用しますクラスを各divに追加し、各divにアンダースコアの形式でタイミングクラスを追加した後、数字を増やします。

<div class="animated slideIn _1"></div> 
<div class="animated slideIn _2"></div> 
<div class="animated slideIn _3"></div> 
<div class="animated slideIn _4"></div> 

ので、あなたはこのような何かを得る:http://output.jsbin.com/cusuz/4

関連する問題