CSS3のキーフレーム

Question

私は、次のコードを持っている：ページのロード後

div.slide-right { 
    width:100%; 
    overflow:hidden; 
} 

div.slide-right { 
animation: 2s slide-right; 
} 

@keyframes slide-right { 
    from { 
    margin-left: -100%; 
    width: 100%; 
    } 

    to { 
    margin-left: 0%; 
    width: 100%; 
    } 
} 
</style> 

今のアニメーションが開始されている2Sを、その要素は、ユーザまたはときによって表示されているいずれかのとき、私はそれらを開始したいですマウスがいくつかの要素を超えています。好ましくは最初のもの。

私はWeeblyを使用していますが、jqueryとこのものを追加するのは少し難しいです。これを行う簡単な方法はありますか？

ありがとうございました！

Answer 1

http://jackonthe.net/css3animateit/を使ってこれを行うことができました。Weeblyのコードスニペットに依存関係をインポートしてから、Webページで説明したようにクラスを追加するのは簡単です。

<div class='animatedParent'> 
    <h2 class='animated bounceInDown'>It Works!</h2> 
</div>