2017年03月9日(木)

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

• 0
• 0
• 0
• 1

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

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

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

「AniCollection」の使い方

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

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

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

...