ブラウザにまたがる純粋なCSSアニメーションの実現-Animate.css

日付:2012-8-12出所:GBin 1.com
オンラインデモローカルダウンロード
通常、Webアニメーションの効果を生成する必要がある場合は、クラスライブラリやjQueryのanimateメソッドを使用することを考慮しますが、アニメーション効果を迅速に実現するにはどのような便利な方法がありますか?
今日のこの文章では、素晴らしいCSSアニメーションの実現方法-Animateを紹介します.css.このCSSアニメーションは、Manchester、UKのデザイナーDan Edenが開発し、設計したものです.これを使用すると、ページ要素にアニメーション効果を簡単に追加できます.
使用方法
非常に簡単で、まず必要なcssファイルをダウンロードし、ダウンロードアドレスですべてのcssをダウンロードするか、オンラインのCreate custom buildを使用してカスタムcssを生成することができます.
ダウンロードするとanimate.cssスタイルシートは、呼び出したHTMLファイルを導入します.以下のようにします.
以上のCSSを参照すると、次のようにページに関連classを追加できます.
Animate.css Demo
class「animated tada」からid=「demo」までの要素を追加します.注意:tadaはアニメーションタイプで、60種類近くの異なるcssアニメーションの特効を選択できます.
以上は静的ページでの使用ですが、動的な呼び出しが必要な場合は、jQueryのようなクラスライブラリを使用してaddClass()メソッドを使用してアニメーションを呼び出すことができます.
ここではjQueryとanimateを使います.cssは簡単なゲームを開発し、指定された時間内に車を鉄箱から移動する必要があります.コードは次のとおりです.
........
出典:ブラウザにまたがる純粋なCSSアニメーションの実現-Animate.css
「ITPUBブログ」からのリンク:http://blog.itpub.net/8288/viewspace-740851/転載する必要がある場合は、出典を明記してください.そうしないと、法律責任を追及します.
転載先:http://blog.itpub.net/8288/viewspace-740851/