css３でキャラクターアニメーションに挑戦してみた
TRANSCRIPT
【CSS3でキャラクターアニメーションに挑戦してみた】
WCAN mini Markup vol.12
【自己紹介】
○仕事某派遣会社のWeb制作部門で、Webサイト＋Webシステムを制作
○プライベートワーク
URL：http://honebito.net/
クリエイター支援を中心としたWebサイト・ケータイコンテンツ制作
【CSS３でのアニメーション】
CSSプロパティをアニメーションさせることができる。Ex.色(color),移動(left,right),透明度(opacity)
但し、ブラウザごとにCSS3のプロパティの対応状況は異なるため、
全て同じ動きが実現できるとは限らない。また現状では、ベンダープリフィックスを指定する必要あり。
【 CSS３でのアニメーションの種類】
１．Transition
２．Animation
対象となる要素の始点と終点の状態をそれぞれ定義し、その二点間をスムーズに変化させることでアニメーションを実現させるという仕組み
始点と終点だけでなく、二点間の任意のタイミングにキーフレームを配置してその時点ごとの状態をそれぞれ指定し、よりダイナミックなアニメーションを実現させることが出来る仕組み
【 Transitonプロパティ】
〇transition-durationアニメーションにかかる時間
〇transition-propertyアニメーションをどのプロパティに対して行うか
〇transition-timing-functionアニメーションのタイミングやどのように進行するかを指定 （イージング）
〇transition-delayアニメーションが開始されるまでの時間 （遅延時間）
[記述例]transition: 3s background ease 0.5s;
/*3秒間のbakcgroundプロパティのアニメーションをeaseで、0.5秒間の遅延後に開始する*/
【 Transitonプロパティ】
〇ベンダープレフィックス（接頭辞）
ブラウザベンダーが独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に、
それが拡張機能であることを明示するために付ける識別子のこと
[記述例]-webkit-transition: .3s background ease .5s; /*Google Chrome、Safari*/-moz-transition: .3s background ease .5s; /*Firefox*/-o-transition: .3s background ease .5s; /*Opera*/-ms-transition: .3s background ease .5s; /*Internet Explorer*/transition: .3s background ease .5s;
【 Animationプロパティ】
〇animation-durationアニメーションにかかる時間
〇animation-fill-modeアニメーションの実行前と実行後に適用するスタイル
〇animation-timing-functionアニメーションのタイミングやどのように進行するかを指定 （イージング）
〇animation-delayアニメーションが開始されるまでの時間 （遅延時間）
〇animation-name実行するアニメーション（@keyframes）の名前
〇animation-iteration-countアニメーションの繰り返し回数
〇animation-directionアニメーションの再生方向
【 Animationプロパティ】
[記述例]animation: myAnimarion 1s ease 0s 1 normal none;
/*[myAnimarion] という@keyframesのアニメーションを 1秒間イージングをeaseで、遅延無し(0秒後)に繰り返し回数1回、再生方向はデフォルトで開始する*/
@keyframesは、要素に対してどのようなアニメーションをするのかということを定義したもので、
プログラミングでいう関数に扱いが似たもの。アニメーションの始点をfrom（もしくは0%）で指定し、終点をto（もしくは100%）で指定。0%と100%の間に25%、50%、80%と細かくキーフレームを配置して、
それぞれに要素の状態を定義することができる。
[記述例]@keyframes myAnimation {0% { background-color: #ff0000; }25% { background-color: #00ff00; width: 100%}50% { background-color: #0000ff; height: 50%;}100% { background-color: #000000; }
}/*０秒後に背景色：#ff0000、0.25秒後に背景色：#00ff00＋幅100%、
0.5秒後に背景色：#0000ff+高さ50%、1秒後に背景色#000000にするアニメーション指定 */
【 AnimationのSample01 】
http://honebito.net/css3/honebito_android/
[HTML]
<div class="container"><div id="honebito_walk01"></div><div id="honebito_walk02"></div><div id="honebito_sit01"></div><div id="honebito_sit02"></div><div id="honebito_sleep01"></div><div id="rebirth_logo"></div><div id="honekage01"></div><a id="site_link" href="http://honebito.net/"></a>
</div>
【 AnimationのSample01 】
【 AnimationのSample01 】 [CSS]
#honebito_walk01 {background-image: url(../images/honebito_walk01.png);width: 321px;height: 300px;z-index: 3;position: absolute;top: 25px;left: 15px;overflow: visible;-webkit-animation:honebito-walk-l 2s 2s 1 ease-out, display-animation 2.5s 1 ease-out;-moz-animation: honebito-walk-l 2s 2s 1 ease-out, display-animation 2.5s 1 ease-out;-o-animation: honebito-walk-l 2s 2s 1 ease-out, display-animation 2.5s 1 ease-out;-ms-animation: honebito-walk-l 2s 2s 1 ease-out, display-animation 2.5s 1 ease-out;animation: honebito-walk-l 2s 2s 1 ease-out, display-animation 2.5s 1 ease-out;
}
@-moz-keyframes honebito-walk-l {0% {left: 1000px; opacity: 0; -moz-transform:rotate(45deg);}40% {left: 1000px; opacity: 0; -moz-transform:rotate(45deg);}80% {left: 15px; opacity: 1; -moz-transform:rotate(0deg);}85% {left: 5px; -moz-transform:rotate(-15deg);}90% {left: 15px; -moz-transform:rotate(0deg);}100% {left: 15px; -moz-transform:rotate(0deg);}
}
【 AnimationのSample02 】
http://honebito.net/css3/honebito_walk/
【参考サイト・参考書籍】
○HTML5 × CSS3 × jQueryを真面目に勉強http://dev.classmethod.jp/ria/html5/html5-x-css3-x-jquery-9-css3transition/http://dev.classmethod.jp/ria/html5/html5-x-css3-x-jquery-9-1-css3animation/
○アニメーションするバナーをCSS3で作るチュートリアル(DL可能)http://tympanus.net/codrops/2012/01/10/animated-web-banners-with-css3/
[参考書籍] CSS3アニメーション・ブック for iPhone & Androidhttp://dothtml5.com/archives/20110425_book_4899772890.html