[CSS]手間がかかるCSSアニメーションがコピペで簡単に実装できる -ShortSnippets.css

CSSもここ数年でかなり進化し、アニメーションをCSSで実装する機会が増えてきました。しかし、難点は実装に手間がかかること。

気持ちのいい動きのスピナーから、あまり見かけない面白い動きをするものまで、コピペで簡単に実装できるスニペットをまとめたShortSnippets.cssを紹介します。

サイトのキャプチャ

ShortSnippets.css
ShortSnippets.css -GitHub

ShortSnippets.cssのデモ

ShortSnippets.cssではチョウチョのスピナー、ボックスシャドウを使ったアニメーションなど、あまり見かけない面白いものが多いです。
チョウチョは、ひらひら舞っています。

デモのアニメーション

デモページ

アニメーションは、他にもたくさん用意されています。

デモのアニメーション

デモページ

クルマのアニメーションなんか、ゼロから実装したらかなり大変ですね。

デモのアニメーション

デモページ

ShortSnippets.cssの使い方

Step 1: 外部ファイル

当スタイルシートとスクリプトを外部ファイルに記述し、必要に応じてfont-awesome.cssやjquery.jsも記述します。

Step 2: HTML

ラッパーのdiv要素を用意し、その中にアニメーションを適用するdiv要素にアニメーションをclassで指定します。

また、CodePenでも公開されているので、コードをいろいろ試すこともできます。

サイトのキャプチャ

ShortSnippets.css -CodePen

sponsors

top of page

©2024 coliss