Css３でキャラクターアニメーションに挑戦してみた

WCAN mini Markup vol.12

【CSS3で
キャラクターアニメーションに挑戦してみた】

【自己紹介】
○仕事
某派遣会社の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-name
実行するアニメーション（@keyframes）の名前

〇animation-duration
アニメーションにかかる時間

〇animation-timing-function
アニメーションのタイミングやどのように進行するかを指定（イージング）

〇animation-delay
アニメーションが開始されるまでの時間（遅延時間）

〇animation-iteration-count
アニメーションの繰り返し回数

〇animation-direction
アニメーションの再生方向

〇animation-fill-mode
アニメーションの実行前と実行後に適用するスタイル

【 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 】 [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);}
85% {left: 5px; -moz-transform:rotate(-15deg);}
90% {left: 15px; -moz-transform:rotate(0deg);}
100% {left: 15px; -moz-transform:rotate(0deg);}
}


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 & Android
http://dothtml5.com/archives/20110425_book_4899772890.html

Css３でキャラクターアニメーションに挑戦してみた

More Related Content

Similar to Css３でキャラクターアニメーションに挑戦してみた (20)

Css３でキャラクターアニメーションに挑戦してみた