CSS3 animation + transition, 「HTML5+α初心者勉強会 @福岡第1回」資料を公開しました

2013.05.27 11:57 author: taikiken | 0件のコメント

2013-05-25 九州産業大学で開催された「HTML5+α初心者勉強会 @福岡第1回」での資料を公開しました。

CSS3 animation, transitionについて自分の復習がてら簡単な紹介をしました。

【デモ】

transition + filter: hoverでfilterがアニメーションします。

CSS3 background color animation: animation 背景色アニメーションを無限に繰返します。

CSS3 filter animation: CSS3 filterのアニメーションです。

CSS3 animation position: position top, leftを使ったアニメーションです。delayと繰返し方向設定が違う二種類のアニメーションです。

CSS3 transform: 当日お見せしませんでしたがCubeアニメーションの元になったtransformを使っています。

CSS3 transformにご興味があるならコチラもご覧になって下さい。
Cubeアニメーションへのリンクが記事の最後にあります。
ActionScript脳で覚えるCSS3 transform matrix 2D 少しだけ3D – 道半ば

CSS3 filter記事
Chrome限定、CSS(-webkit-filter)でエフェクト
＊現在はSafari, Firefox, iOS 6 Safari, IE 9などモダンブラウザがCSS3 filterに対応しています。
＊記事中のデモはwebkitブラウザでしか動作しません。