Loading...

Single Post

HOME > post > Column > CSS3アニメーションまとめ

CSS3アニメーションまとめ

| Column, Web
css3アニメーション

サイト制作で使いたいと思っているCSS3アニメーションを備忘録兼ねてご紹介させて頂きます。Flashの影が薄くなりアニメーションを見る機会が減っていましたが、最近HTML5 canvasやCSS3を使った動きのあるサイトが復活してきています。今後のサイト制作に活かせそうなアニメーションを何点か掲載します。

使えそうなloadingアニメーション

See the Pen Less Loaders by Jesús Gracia Pardina (@JesGraPa) on CodePen.

難し言葉の意味などに補足を付ける時に使えそうなテキストポップアップ

See the Pen CSS3 animation effects for Magnific Popup by Dmitry Semenov (@dimsemenov) on CodePen.

ワンポイントアクセントに使えそうなMap marker

See the Pen Map marker CSS only by Andreas Storm (@andreasstorm) on CodePen.

インタラクティブなサイトを制作するときに使えそうなアニメーション

See the Pen Cubes CSS3 Animation by Nate Wiley (@natewiley) on CodePen.

サイトに導入したくなるオシャレなボタン

See the Pen CSS3 Animated buttons by Hiro (@githiro) on CodePen.

押した感覚が気持ち良いボタン

See the Pen Pure CSS3 Button by Haeman (@pedox) on CodePen.

まとめ

動きのあるサイトは今後も増えてくるでしょう。codepenでは多くのCSS3を使ったアニメーションが公開されております。謙虚でサイトのアクセントになるアニメーションを探してみられてはいかがでしょうか!!

関連記事

Contact Page