CSS3アニメーションの素材が70種類揃った「AniCollection」

2017年3月10日

Webサイトに動きがあると、興味が湧いたり、楽しい気分になることはありませんか？特に、ボタンにアニメーションがついていれば、ついクリックしたくなったり、スクロールエフェクトの効果として動きがあるものは、どんどんページをスクロールしたくなりますよね。

今日は、そんなアニメーションをCSS3で表現するためのサンプルコードが70種類以上用意されている「AniCollection」というサイトをご紹介します。

このサイトのコードを使えば、アニメーションを効果的に使ったWebサイトやパーツを作ることができるようになります。

「AniCollection」の使い方

「AniCollection」にアクセスをすると、カテゴリ毎にカラフルな角丸長方形が並んでいます。この長方形はアニメーションのデモになっていて、マウスカーソルを重ねるとアニメーションが再生されます。

その中から気に入ったものを選んで、クリックをしてみましょう。

すると、詳細ページが表示され、大きな画面でアニメーションの動きを確認したり、HTMLやCSSコードの内容を確認することができます。ライセンスについては、詳細ページの左上の「License: 」にそれぞれ記載がされているので、必ず確認するようにしましょう。

ぜひ、「AniCollection」でCSS3のアニメーションを活用した動きのある楽しいサイトを作ってみてくださいね♪♪