特集
カテゴリー
タグ
メディア

CSS3でHTMLの要素に滑らかなアニメーションをつけるためのチートシート

CSS3でHTMLの要素に滑らかなアニメーションをつけるためのチートシート

CSS3 ANIMATION CHEAT SHEET」ではHTMLの要素に滑らかなアニメーションをつけられるCSSが公開されています。CSS3からアニメーションやキーフレームを指定できるようになり、JavaScriptを使わなくてもCSSのみでアニメーションが簡単につけられるようになりました。よく使われそうなアニメーションをひとまとめにしたCSSがダウンロードできます。

以下に使ってみた様子を載せておきます。まずCSS3 ANIMATION CHEAT SHEETへアクセスしましょう。トップにおじさんの絵がありますが、サンプルの動きに使われます。

141124_cs2.jpg

アニメーション例はたくさんあります。よく使われるスライドイン・アウトを始め、拡大縮小やバウンドもありますよ。それぞれの項目をクリックすると、おじさんの絵が実際に動いて動作の確認ができます。

141124_cs3.jpg

使い方は簡単で、配布されているCSSをダウンロードして読み込み、アニメーションをつけたい要素にclassを振るだけです。JavaScriptを使えば、クリックしたときやスクロールしたときにアニメーションを付加することが可能になります。

CSS3で要素にアニメーションを付けたいときにぜひご活用ください。

CSS3 ANIMATION CHEAT SHEET

(カメきち)

swiper-button-prev
swiper-button-next