[CSS]手間がかかるCSSアニメーションがコピペで簡単に実装できる -ShortSnippets.css
Post on:2016年10月17日
sponsors
CSSもここ数年でかなり進化し、アニメーションをCSSで実装する機会が増えてきました。しかし、難点は実装に手間がかかること。
気持ちのいい動きのスピナーから、あまり見かけない面白い動きをするものまで、コピペで簡単に実装できるスニペットをまとめたShortSnippets.cssを紹介します。
ShortSnippets.css
ShortSnippets.css -GitHub
ShortSnippets.cssのデモ
ShortSnippets.cssではチョウチョのスピナー、ボックスシャドウを使ったアニメーションなど、あまり見かけない面白いものが多いです。
チョウチョは、ひらひら舞っています。
アニメーションは、他にもたくさん用意されています。
クルマのアニメーションなんか、ゼロから実装したらかなり大変ですね。
ShortSnippets.cssの使い方
Step 1: 外部ファイル
当スタイルシートとスクリプトを外部ファイルに記述し、必要に応じてfont-awesome.cssやjquery.jsも記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<head> <!--font-awesome--> <link href="css/font-awesome.min.css" rel="stylesheet"> <!--Demo--> <link href="css/demo.css" rel="stylesheet"> <!--ShortSnippet--> <link rel="stylesheet" href="css/style.css"> </head> <body> ... コンテンツ ... <!--JQuery--> <script src="js/jquery.min.js"></script> <!--custom--> <script src="js/script.js"></script> </body> |
Step 2: HTML
ラッパーのdiv要素を用意し、その中にアニメーションを適用するdiv要素にアニメーションをclassで指定します。
|
1 2 3 |
<div class="snippet-wrap"> <div class="spinner spinner1"></div> </div> |
また、CodePenでも公開されているので、コードをいろいろ試すこともできます。
sponsors
