独自属性で任意のHTML要素に様々なアニメーション遷移エフェクトを付与できるスタイルシート・「transition.css」
transition.cssは独自属性で任意のHTML要素に様々なアニメーション遷移エフェクトを付与できるスタイルシートです。 CDNも用意されていますが、配布サイトで数値を調整してコードをコピーする事も出来るので1つのプロジェクトで複数のエフェクトを使わないのであればCSSそのものを読み込む必要はありません。 遷移のスタイルは円型、ワイプ、四角型、ポリゴンなどに分けられており、各種にいくつか異なるエフェクトが用意されています。 以下、動作サンプルです。 右下にあるrerunを押せば動作を確認できます。 サンプルではポリゴンのin:diamond:hesitateを利用してみました。以下のコードが提供されます。 @keyframes diamond-in-hesitate { 0% { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50
CSS3 Animate It - クラス名を指定するだけで簡単にアニメーションを実現 MOONGIFT
CSS3によってアニメーションが実現できるようになったとは言っても、それはイコール簡単であるという意味ではありません。ごく基礎的な実装が用意されているので、現実的なアニメーションは自分で作らないといけません。 そこで使ってみたいのがCSS3 Animate Itです。CSSのクラスを指定するだけでアニメーションを実現してくれるライブラリです。 CSS3 Animate Itの使い方 公式サイトで用意されているアニメーションです。 クリックイベントと組み合わせたデモです。 例えば以下のようなHTMLタグでアニメーションを実行できます。 <div class='animatedParent'> <h2 class='animated bounceInDown'>It Works!</h2> </div> アニメーションの仕方はクラス名として定義されているので、指定するだけです。後はJavaSc
CSSアニメーションもこれなら手軽！DOM要素にマイクロインタラクションを与えるJavaScriptライブラリ -Micron
ページ上のさまざまなDOM要素にマイクロインタラクションを簡単に与えることができるJavaScriptのライブラリを紹介します。 実装は非常に簡単、カスタマイズ性にも優れており、CSSで要素をアニメーションさせ、JavaScriptでインタラクティブな動作をコントロールできます。 インタラクションを与える 要素に「data-micron」を加えるだけで、インタラクションを与えることができます。 バインド インタラクション 「data-micron-bind="true"」で、他の要素にも簡単にバインドできます。 コントロール インタラクション エフェクト、スピード、イージングなどは、data属性で簡単に変更できます。 Micron.jsのデモ ライブラリを実際に使用して、Micron.jsをボタンに適用してみました。 ボタンをクリックすると、基本となる12種類のアニメーションを楽しめます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
