CSSアニメーションの参考に!CSS animationギャラリーサイトなどいろいろ

2017/05/22

46_1
古いIEがサポート終了になってきているので、コーディングのときには今まで以上にCSS3のアニメーションを利用できる機会が増えています。
とはいえ、「ここはどんなアニメーションがいいかな?」なんて考え込んでしまうことってありますよね。

そんなときに、アニメーションの参考になる親切なサイトを紹介させてもらいます!
私もちょくちょくお世話になっています^^

Single Element CSS Spinners

46_2
こちらのサイトでは、CSSで実装できるローディングアニメーションを公開してくれています。
よく見かけるようなシンプルなものもあって、をクリックするとコードが表示されるのでそのまま利用することができます!

spanAnimista

46_3
Animistaは、「BASIC」「ENTRANCES」「EXITS」「TEXT」「ATTENTION」「BACKGROUND」のメニューをベースにして、さらに2段階までアニメーションの種類を選びながらデモを見ることができます。
さらに、オプションを好みに調整してcssコードを利用するこができます!
種類が豊富なので全てを見ていくのは大変かもしれませんが、とても参考になって親切なサイトです。

commte blog

46_4
Web制作・Webデザインに特化した記事を配信されているコムテブログでは、さまざまなエフェクトのアニメーションサンプルが書かれています。
それぞれのアニメーションに丁寧に説明をしてくれているだけではなく、コードも載せてくれているなんとも優しい記事です!

ICS MEDIA

46_5
こちらのブログ記事では、CSS Filtersとアニメーションを組み合わせた使い方の参考になります。
こちらの記事もひとつひとつのパターンを丁寧に説明してくれていて、デモとソースコードを公開してくれています!

Button Styles Inspiration

46_6
ボタンをhoverしたときのアニメーションを数多く紹介してくれているのがButton Styles Inspirationです!
CSS3ならではの面白くて実用的なアニメーションなので参考になります。
こちらは今までのサイトとは違いソースコードをダウンロードして利用する形になります。
 
ソースダウンロードはこちらからになります

どのサイトもソースを公開してくれていて、丁寧に説明してくれているものもあるので利用するのもとても簡単で参考になると思います!
そのまま利用しなくても、これらを参考に自分流に変えて使ったりするのにも時間短縮につながるかもしれません。
 
今回は人様のものを紹介してばかりになってしまったので、いつか私自身もサンプルを公開できればと思います^^:

About

madka prof

WebLifeTimesはWebデザイナーのMadkaがWeb制作に関連したことや日々のちょっと気になったことなどを調べたり記録しているサイトです。TwitterFacebookで気になったニュース記事をシェアしたり独り言をつぶやいたりしています!

New Post

Recommend