WCAN mini Markup vol.12【CSS3で キャラクターアニメーションに挑戦してみた】
【自己紹介】○仕事 某派遣会社のWeb制作部門で、Webサイト+Webシステムを制作○プライベートワーク                   URL:http://honebito.net/   クリエイター支援を中心としたWebサイト・ケータ...
【CSS3でのアニメーション】CSSプロパティをアニメーションさせることができる。Ex.色(color),移動(left,right),透明度(opacity)但し、ブラウザごとにCSS3のプロパティの対応状況は異なるため、全て同じ動きが実現で...
【 CSS3でのアニメーションの種類】1.Transition対象となる要素の始点と終点の状態をそれぞれ定義し、その二点間をスムーズに変化させることでアニメーションを実現させるという仕組み2.Animation始点と終点だけでなく、二点間の任意...
【 Transitonプロパティ】〇transition-duration アニメーションにかかる時間〇transition-property アニメーションをどのプロパティに対して行うか〇transition-timing-function ...
【 Transitonプロパティ】〇ベンダープレフィックス(接頭辞)ブラウザベンダーが独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に、それが拡張機能であることを明示するために付ける識別子のこと[記述例]-webkit-trans...
【 Animationプロパティ】〇animation-name 実行するアニメーション(@keyframes)の名前〇animation-duration アニメーションにかかる時間〇animation-timing-function アニメ...
【 Animationプロパティ】[記述例]animation: myAnimarion 1s ease 0s 1 normal none;/*[myAnimarion] という@keyframesのアニメーションを 1秒間イージングをease...
【 AnimationのSample01 】     http://honebito.net/css3/honebito_android/
【 AnimationのSample01 】[HTML]<div class="container">        <div id="honebito_walk01"></div>        <div id="honebito_walk0...
【 AnimationのSample01 】                                    [CSS]#honebito_walk01 {         background-image: url(../images/...
【 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:/...
Upcoming SlideShare
Loading in …5
×

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

2,056 views

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,056
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
4
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

  1. 1. WCAN mini Markup vol.12【CSS3で キャラクターアニメーションに挑戦してみた】
  2. 2. 【自己紹介】○仕事 某派遣会社のWeb制作部門で、Webサイト+Webシステムを制作○プライベートワーク URL:http://honebito.net/ クリエイター支援を中心としたWebサイト・ケータイコンテンツ制作
  3. 3. 【CSS3でのアニメーション】CSSプロパティをアニメーションさせることができる。Ex.色(color),移動(left,right),透明度(opacity)但し、ブラウザごとにCSS3のプロパティの対応状況は異なるため、全て同じ動きが実現できるとは限らない。また現状では、ベンダープリフィックスを指定する必要あり。
  4. 4. 【 CSS3でのアニメーションの種類】1.Transition対象となる要素の始点と終点の状態をそれぞれ定義し、その二点間をスムーズに変化させることでアニメーションを実現させるという仕組み2.Animation始点と終点だけでなく、二点間の任意のタイミングにキーフレームを配置してその時点ごとの状態をそれぞれ指定し、よりダイナミックなアニメーションを実現させることが出来る仕組み
  5. 5. 【 Transitonプロパティ】〇transition-duration アニメーションにかかる時間〇transition-property アニメーションをどのプロパティに対して行うか〇transition-timing-function アニメーションのタイミングやどのように進行するかを指定 (イージング)〇transition-delay アニメーションが開始されるまでの時間 (遅延時間)[記述例]transition: 3s background ease 0.5s;/*3秒間のbakcgroundプロパティのアニメーションをeaseで、0.5秒間の遅延後に開始する*/
  6. 6. 【 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;
  7. 7. 【 Animationプロパティ】〇animation-name 実行するアニメーション(@keyframes)の名前〇animation-duration アニメーションにかかる時間〇animation-timing-function アニメーションのタイミングやどのように進行するかを指定 (イージング)〇animation-delay アニメーションが開始されるまでの時間 (遅延時間)〇animation-iteration-count アニメーションの繰り返し回数〇animation-direction アニメーションの再生方向〇animation-fill-mode アニメーションの実行前と実行後に適用するスタイル
  8. 8. 【 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; }}/*0秒後に背景色:#ff0000、0.25秒後に背景色:#00ff00+幅100%、0.5秒後に背景色:#0000ff+高さ50%、1秒後に背景色#000000にするアニメーション指定 */
  9. 9. 【 AnimationのSample01 】 http://honebito.net/css3/honebito_android/
  10. 10. 【 AnimationのSample01 】[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>
  11. 11. 【 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);} }
  12. 12. 【 AnimationのSample02 】 http://honebito.net/css3/honebito_walk/
  13. 13. 【参考サイト・参考書籍】○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

×