More Related Content
What's hot
Similar to ㉘HTML5+CSS3でアニメーション！
Similar to ㉘HTML5+CSS3でアニメーション！ (20)
More from Nishida Kansuke
More from Nishida Kansuke (20)
Recently uploaded
Recently uploaded (10)
㉘HTML5+CSS3でアニメーション！
- 1. HTML5+CSS3アニメーション 勉強会 CSSでアニメーション！
- 3. 注意事項 • 現時点では、HTML5を始めもろもろの仕様は確定していません。 なるべく新しい仕様を見ているつもりですが、情報古かったらすみ ません。 • ざっくり説明するために、簡単に説明しています。厳密にいうと ちょっと違う部分もあるかと思います。でもまあ、だいたいあって る（はず）。 • 過去の環境（IE6とかIE7とか、PHP4とか）には採用されていない 話もあるので、その辺をターゲットにする場合は注意（無視してい いと思うけど） • リンクは日本語訳がある場合はそっちにリンクしています。公式情 報ではないので、仕事で使う場合は原文を確認しましょう。
- 4. アニメーションの特徴 • GIFアニメ • FLASH • CSS(transition、animation) • javascript
- 5. GIFアニメ • ○スクリプト不要 • 長時間のアニメーションには不向き • 大きいサイズは苦手 • 動的なアニメーションはできない • 色数が少ない
- 6. FLASH • ○スクリプト不要／プログラムも可能 • プラグインが必要 • 対応していないブラウザがある
- 7. CSS(transition、animation) • ○スクリプト不要 • ○システム負荷が少ない（レンダリングエ ンジン、ブラウザによる制御ができるた め）
- 8. javascript • ○CSSを制御できる • ○canvasを制御できる • プログラムが必要
- 9. まとめ • 簡単なアニメーションは、アニメGIFや CSSでスクリプトいらず！ • 複雑なアニメーションは、javascriptで！ CSSを制御して効率良く動かそう！
- 10. CSS3のアニメーション • transform • transitions • animations
- 11. CSSの記述① transform:translate(20px, 20px); -webkit-transform:translate(20px, 20px); -moz-transform:translate(20px, 20px); -ms-transform:translate(20px, 20px); -o-transform:translate(20px, 20px); この５行は同じ意味なんだけど、上からCSS3準拠、 safariとかのやつ、firefoxのやつ、IEのやつ、operaの やつ こんな感じでブラウザごとに書いていかなくてはいけな いので大変＞＜
- 13. ベースになるhtml① <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8" /> <title>HTML5</title> <style> .sample{ position:relative; float:left; margin:40px; width:100px; height:100px; line-height:100px; text-align:center; font-size:24px; }
- 14. ベースになるhtml② .sample div{ position:absolute; width:100px; height:100px; } .bg{ background:#ddd; } .ex{ background-color:rgba(0, 255, 0, 0.5); } </style>
- 16. transform • 要素に対して拡大、縮小、移動などの変形が できる • Transforms 2DとTransforms 3Dがある • transitionsやanimationsと組み合わせるこ とで表現度の高いアニメーションが可能 • CSS Transforms – http://www.w3.org/TR/css3-transforms/ • -moz-transform – https://developer.mozilla.org/ja/CSS/-moz- transform
- 17. 移動 • translate(tx, ty)で要素を移動できます。 • 他にもtranslateX(tx)とかもあるけど、説 明を省略します。以降も同じです。
- 18. サンプル #ex01{ -moz-transform:translate(20px, 20px); } <div class="sample"> <div class="bg"></div> <div id="ex01" class="ex">ex01</div> </div>
- 19. できた • いどうした！
- 20. TIPS • 右クリックメニュー→要素の調査 • 画面右下の３Dビュー • 立体で要素が確認できるよ！
- 22. サンプル #ex02{ -moz-transform:scale(1.2, 0.8); }
- 23. できた • へんけいした！
- 24. 回転 • rotate(angle)で要素を回転できます。 • angleは、css3で定義されている<angle> 形式で指定します。 • 時計回りで、マイナスを指定すると逆に回 転します。
- 25. <angle> • deg – 360で一周 • grad – 400で一周 • rad – 2πで一周 • turn – 1で一周
- 26. サンプル #ex03{ -moz-transform:rotate(30deg); } #ex04{ -moz-transform:rotate(-30deg); }
- 27. できた • かいてんした！
- 28. 変形の原点 • 変形の原点は、要素の中央 • transform-origin(percentage, percentage)で、原点を変更できる
- 29. サンプル #ex05{ -moz-transform:rotate(-30deg); -moz-transform-origin: 100% 0%; }
- 30. できた • ちゅうしんがずれた！
- 31. 傾斜 • skew(ax, ay)で、要素を傾斜させる • ax,ayは<angle>形式
- 32. サンプル #ex06{ -moz-transform:skew(30deg, 0deg); }
- 33. できた • へんなかたち！
- 34. 行列変換 • matrix(a, c, b, d, tx, ty)で、行列変換がで きる！ • なんかむずかしいからよくわかんないけ ど！！ • ちなみに、javascriptからtransformの値 を取るとrotateとかしか指定してなくても、 matrixしか取得できないからめんどくさ い！
- 35. サンプル #ex07{ -moz-transform: matrix(1, 0, 0.6, 1, 20px, 0); }
- 36. できた • ふーん
- 37. おまけ <script> $(function(){ $('.ex').each(function(index, element) { console.log($(this).css('-moz- transform')); }); }); </script>
- 39. 3d • 2Dの関数と同じような奴が3Dにもあるの で、まずはそれをやってみよう！ • 3Dの場合は、x,yの他に奥行きを表すzが 加わります。 • zは、プラスになると近づいて、マイナス になると遠くになります。
- 40. ベースになるhtml .sample3d{ -moz-transform:rotateX(-20deg) rotateY(-20deg); } <div class="sample sample3d"> <div class="bg"></div> <div id="ex08" class="ex">ex08</div> </div>
- 41. サンプル① #ex08{ -moz-transform:translate3d(20px, 0, 20px); } #ex09{ -moz-transform:translate3d(20px, 0, -20px); } #ex10{ -moz-transform:rotate3d(1, 0, 0, 45deg); }
- 42. サンプル② #ex11{ -moz-transform:rotate3d(0, 1, 0, 45deg); } #ex12{ -moz-transform:rotate3d(0, 0, 1, 45deg); } #ex13{ -moz-transform:scale3d(1.5, 1, 1); }
- 43. サンプル③ #ex14{ -moz-transform:scale3d(1, 1.5, 1); } #ex15{ -moz-transform:scale3d(1, 1, 1.5); } #ex16{ -moz-transform:skew(30deg, 0deg); } #ex17{ -moz-transform:skew(0deg, 30deg); }
- 44. せつめい • translate3d(tx, ty, tz)と、scale3d(sx, sy, sz)はz座標の指定が増えた！ • rotate3d(x, y, z, angle)は、回転軸と角度 を指定できるように！ • skew(ax, ay)はそのまま！平面なのでzの 傾きはないため。
- 47. やってみよう #ex18{ -moz-transform:perspective(100px) translate3d(0, 0, 0); } #ex19{ -moz-transform:perspective(100px) translate3d(0, 0, 20px); } #ex20{ -moz-transform:perspective(100px) translate3d(0, 0, -20px); }
- 48. できた • なるほど！
- 49. matrix3d • matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)で行列演算ができる • 他にも色いろある！けど、各ブラウザの実装 待ちみたいな感じ。 • 参考 – http://blogs.msdn.com/b/ie_ja/archive/ 2012/02/07/ie10-css3-3d-transforms.aspx
- 50. まとめ • transformをつかうと、いままでになかっ た形に変形できる！ • 他にもいろいろあるけど、未実装だった りまだまだこれからの予感！
- 51. transitions • 時間と変更したいプロパティを指定すると、 アニメーションしながら値が変わる！ • 設定できるプロパティは、以下のとおり – http://www.w3.org/TR/css3-transitions/ #animatable-properties • CSS transitions – https://developer.mozilla.org/ja/CSS/ CSS_transitions • CSS transitions W3C Working Draft – http://www.w3.org/TR/css3-transitions/
- 52. せつめい • transition-property – トランジションを適用するプロパティの名前を指定します。all とすると、全てのプロパティに影響します – 指定しなかったプロパティの変更は即座に反映されます。 • transition-duration – 所要時間を指定します。複数の値を指定すると、プロパティご とに時間を指定できます • transition-timing-function – イージングを指定します – ease,linear,ease-in,ease-out,ease-in-outおよび、ベジェ曲線 で指定できるcubic-bezier(p0,p1,p2,p3)があります • transition-delay – 実行が開始されるまでの待ち時間を指定します。マイナスを指定 すると、アニメを途中から開始できます。
- 53. 開始トリガー • :hoverやjavascriptを使って、トランジ ションを開始しよう！
- 54. サンプル① #ex01{ -moz-transition-property:background-color; -moz-transition-duration:2s; -moz-transition-timing-function:linear; -moz-transition-delay:0; background-color:rgba(0, 0, 255, 0.5); color:#000; } #ex01:hover{ background-color:rgba(255, 0, 0, 0.5); color:#fff; }
- 55. できた • マウスをのせると背景色がトランジショ ンしながら色が変わる！（文字色は変わ らない！） • 画面読み込み時にはトランジションしな い！
- 56. サンプル② #ex02{ -moz-transition-property:background-color color; -moz-transition-duration:2s; -moz-transition-timing-function:linear; -moz-transition-delay:0; background-color:rgba(0, 0, 255, 0.5); color:#000; } #ex02:hover{ background-color:rgba(255, 0, 0, 0.5); color:#fff; }
- 57. できた • マウスをのせると背景色と文字色がトラ ンジションしながら色が変わる！
- 58. イージング • transition-timing-functionに指定するこ とで、いろいろ変更できる！ • 自分でも作れるから作ってみよう！ • CSS transition function manipulator – http://cssglue.com/cubic
- 59. イベント • transition終了時に、javascriptでイベン トを拾うことができる！ • webkitTransitionEnd,transitionend,MS TransitionEnd,oTransitionEnd,webkitTr ansitionEndなどブラウザごとに名前が違 うのでたるい・・・。 • 開始時のイベントはブラウザごとに実装が わかれてる！firefoxは実装されてないみ たい＞＜
- 60. サンプル $(function(){ $(".sample").bind("transitionend",function(){ console.log(this); }); });
- 61. できた • トランジションが終わるとイベントが発生 してログが出る！
- 62. できた • たくさんログが出た・・・ • 変化するプロパティの数だけ、イベントが 発生してログが出る！ • その割には、数が多い・・・。よくわか んない＞＜
- 63. まとめ • 手軽にアニメーションできたり、イージン グまで出来るのは便利！
- 64. animations • キーフレームを定義してアニメーションで きる！ • CSS animations – https://developer.mozilla.org/ja/CSS/ CSS_animations • CSS Animations Editor s Draft – http://dev.w3.org/csswg/css3- animations/
- 65. せつめい１ • animation-delay – 開始までの遅延時間 • animation-direction – アニメーションするたびに、もどるか最初からす るかなどを設定（normal, alternate, reverse, alternate-reverse） • animation-duration – アニメーションの長さ • animation-iteration-count – 繰り返し回数。infiniteで無限
- 66. せつめい２ • animation-name – キーフレームの名前 • animation-play-state – アニメーションの状態を指定できる（paused、 running ）。今後なくなるかもしれない。 • animation-timing-function – イージング • animation-fill-mode – アニメーションの実行前後に、指定したスタイル を適用するかどうか
- 67. サンプル１ #ex01{ -moz-animation-delay:0; -moz-animation-duration:2s; -moz-animation-iteration-count:infinite; -moz-animation-name:ex01; -moz-animation-direction:alternate; -moz-animation-timing-function:linear; }
- 68. サンプル２ @-moz-keyframes ex01{ from{ background-color:rgba(0, 255, 0, 0.5); } to{ background-color:rgba(255, 0, 0, 0.5); } }
- 69. できた • ページのよみこみがおわると、てんめつ する！
- 70. イベント • アニメーションの開始、終了、繰り返し の開始時にanimationstart, animationend, animationiterationを拾 うことができる！ • これもブラウザごとに名前が違うのでたる い・・・。
- 71. やってみよう $(function(){ $(".sample").bind("animationstart", function(e){ console.log("animationstart", this); }); $(".sample").bind("animationend", function(e){ console.log("animationend", this); }); $(".sample").bind("animationiteration", function(e){ console.log("animationiteration", this); }); });
- 72. できた • てんめつしたらログが出る！ • startのログは出ない！（スタートのタイ ミングでは、jQueryが実行されてないの で）
- 73. おうよう • キーフレームはたくさん指定できる！ • fromが0%,toが100%なので、そのあい だのキーフレームを指定できる！
- 74. サンプル１ #ex02{ -moz-animation-delay:0; -moz-animation-duration:2s; -moz-animation-iteration-count:infinite; -moz-animation-name:ex02; -moz-animation-direction:alternate; -moz-animation-timing-function:linear; }
- 75. サンプル２ @-moz-keyframes ex02{ from{ background-color:rgba(0, 255, 0, 0.5); } 50%{ background-color:rgba(0, 0, 255, 0.5); } to{ background-color:rgba(255, 0, 0, 0.5); } }
- 76. できた • いろがかわる！
- 77. まとめ • ホバーなど簡単なアニメーションなら CSSでやったほうがいいかも！ • スマフォなどブラウザが固定の場合は積 極的に採用を検討しよう！
- 78. とのさまラボ！ • 勉強会に参加した人どうしのコミニュティがほしい！ 勉強会の開催日時の告知がほしい！ という意見をみなさまからいただいたので、 コミニュティを作成しました！ ぜひ「いいね！」をお願いします！ https://www.facebook.com/TonosamaLabo
- 79. おわり 主催（共同開催）： 株式会社 gooya http://www.gooya.co.jp/ メドレー株式会社 http://www.medley.co.jp/ 講師：西田 寛輔 (Tonosamart) http://www.facebook.com/tonosamart