CSS3アニメーション

2015年6月14日


モダンブラウザを基準に制作できる機会が増えてきたのでCSSアニメーションが使えるようになってきました。
一昔前はJavascriptやFlashを使っていましたが、技術の進歩も速いものでCSSでアニメーションができるなんて思ってもいませんでした。
とは言え、まだメインで使うにはリスクがあるので、ボタンや写真などちょっとしたエフェクトに使うことが多いですね。

というこで、CSSアニメーションの参加にしているサイトを紹介していきたいと思います。

写真エフェクト
拡大画像をホバーでわかりやすく表示させるエフェクト。
http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Hover-Effects/index.html#
http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Hover-Effects/index.html#

画像の折りたたみエフェクトが面白い。
http://tympanus.net/Tutorials/3DHoverEffects/index.html
http://tympanus.net/Tutorials/3DHoverEffects/index.html

ボタンエフェクト
フラットボタンのエフェクトの参考になります。
http://ianlunn.github.io/Hover/
http://ianlunn.github.io/Hover/

フラットなグローバルメニューはテキストで行うことが多いですが、上のボタンと違ったエフェクトがいい感じです。
http://tympanus.net/Development/CreativeLinkEffects/
http://tympanus.net/Development/CreativeLinkEffects/

他にもたくさんエフェクトが出回っています。
これから参考に新たな動きを作ったりするのがとてもおもしろいです。
制作が詰まってしまうとなかなかそんな余裕がないかもしれませんが、仕事に余裕を作っていろいろ実験することもWEBの制作者には必要ではないかと思います。
WEBの日進月歩はすごく速いですから・・・・。


  • カテゴリー:Tips
  • タグ:
  • 投稿者:yamamoto

▲BACK TO TOP