CSSアニメーションがすごいサイト

transitionを使用した簡単なCSS3アニメーションは書けるんですけど（マウス載せたらゆっくり色が変わる的な）、もっとダイナミックな美しいアニメーションを実装したいんだよお、って思いませんか？

私は思います。

硬めな企業のサイトだとあんまり使わないかもしれませんが、キャンペーンサイトとか、BARやアパレルなどデザイン重視のサイトだとアニメーションの要望も多かったりするんですよね。

だいたいAnimate.cssみたいなライブラリを使ってしまう事が多いのですが…そろそろちゃんと勉強しとかないと…今頃かよっていう意見は置いといて…

というわけで、「CSSアニメーションって難しくない…？」という考えを払拭できるよう、参考になるサイトとかサンプルとか集めてみました。

CSSアニメーションがすごいサイト

夜空ノ贈リ物

CSSアニメーションを学ぶのに超、超おすすめなのは「夜空ノ贈リ物」。

CSS3で作られた作品で、初歩からCSSアニメーションを学べます。
これがまあすごいんですよ本当に。

https://www.yui540.graphics/content/sky-night-gift/

www.yui540.graphics

chapter01で書かれているanimationのサンプルを基本として作ったのがこんな感じ。

※止まっていたらリロードしてみてください

https://www.yui540.graphics/content/sky-night-gift/

www.yui540.graphics

いやもうセンス、センスがマジですごいです。
何度も繰り返し見たくなるし、無駄にスクロールしたくなるサイトなんです。

もともとはWeb本として制作されたとの事。
GitHubでも公開されています。

GitHub - yui540/Yozora_No_Okurimono: 『ようこそ----臆病な魔女教団へ。』

『ようこそ----臆病な魔女教団へ。』. Contribute to yui540/Yozora_No_Okurimono development by creating an account on GitHub.

github.com

こちらも素敵な制作者のyui540さんのサイトです。
すごいなあ。

https://www.yui540.graphics/

www.yui540.graphics

制作者のyui540さんのnote。

yui540｜note

CSS Animation

note.com

CSSアニメーションがすごいサイト　世界編

デザインリソースやツールをまとめたサイト「Design Your Way!」から、HTML5とCSS3で書かれたサイトを見つけてきました。

The Evolution of the Web

HTML5とCSS3で書かれたサイト。
もうすごすぎて何がどうなっているのかさっぱりわかんないです。

※202201　公開が終了していましたのでリンクを削除します
 

Museum of the World

これもHTML5とCSS3。
大英博物館とGoogle アートプロジェクトの共同開発とのこと。
見てて酔うのと翻訳されないのがきついですが写真見てるだけでも楽しいです。

The Museum of the World

I'm exploring the Museum of the World. See how our history is connected.

britishmuseum.withgoogle.com

Epic

ベルギーのWEB制作・システム開発の会社。
デザインもそうですが、社員の紹介とかも凝ってて面白い！

EPIC Agency - Imagine, Build, Tell.

EPIC is a digital agency with a unique blend of technical, strategic and creative skills. We help brands to have a positive impact on their environment.

www.epic.net