【UIデザイナー必見】動きが面白い!目を引くこと間違いなしのCSSアニメーション集part1

最近のデザインは動作が軽いアニメーションをいれているものが多いですよね。
やはり目を引くという事で、アニメーションは重要な要素の1つになってきているのかもしれません。

そこで本日はCSSとJSのコピペで簡単に導入出来る、動きが面白いかつ実用的なCSSアニメーションpart1をご紹介します。

part2はこちら↓

【UIデザイナー必見】動きが面白い!目を引くこと間違いなしのCSSアニメーション集part2

CSS loading animation


Animated Shopping Cart Icons


Hamburger Icon CSS3 ONLY Animation


404 Animated Character


CSS Mars Landing

CSS The Avengers

Pure CSS Day/Night Toggle Swith

Google Now 3rd Party Apps

clo clo

CSS preloader!

Submit Button (GSAP edition)

See the Pen Submit Button (GSAP edition) by auginator (@auginator) on CodePen.

Elastic SVG Sidebar Material Design

Particle button

Gooey Menu

Flipside

The ultimate hamburger menu