2014年10月26日(日)、東札幌・ICC Cross×Gardenで開催したCSS Nite in SAPPORO, Vol.15「先どりWebトレンド2015」のフォローアップとして、長谷川 広武(ハム)による「CSS3アニメーション 3分クッキング (´ ºムº `) 〜作りながら学ぶCSS3アニメーション〜」の資料を公開します。
スライド/音声
動画
※ デスクトップやタブレットでは、右下の「Vimeo」から、大きなサイズで見られます
フォローアップメッセージ
今回はCSS3のアニメーションに限定して説明をしました。
エフェクトの対応がIE8やIE9にも必須となると、JavaScriptの導入が必要になりますが、IE9以下ではエフェクトをさせなくても良いという条件で整理できるのであれば、CSSのみでの実装が十分可能です。
JavaScriptがわからなくとも、Transitionを加えるだけでちょっとしたアニメーションが導入できるので、サイトのちょっとしたアクセントとして、今後の案件などで取り入れてみてください。
コードも見れるデモを用意していますので、今後の導入のきっかけにしてもらえたら嬉しいです。
http://sacss.net/cssnite_vol15/
(当日にはお見せできなかったデモなども追加しています)
今後、私の主催している勉強会「SaCSS」で、実際のコードをお見せしつつ、その場で書いたりもしながら実際の動作確認ができる内容を予定しています。
http://sacss.net/
12月13日 (土) vol.61 の回で行う予定ですので、興味のある方やもっと勉強したい方は、ぜひその回にもご参加ください。