イナヅマTVログ

css3 transition filter

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

| 0件のコメント

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

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

【スライド】
Slideshare: http://www.slideshare.net/taikiken/css3-transition-animation

【デモ】
css3 transition filter

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を使っています。

ご紹介したAnimate.cssに関するブログ記事です。
No JavaScript, CSS3アニメーション・ライブラリAnimate.cssをCompassで

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ブラウザでしか動作しません。

コメントを残す

必須欄は * がついています