https://www.facebook.com/TonosamaLabo

1. HTML5+CSS3アニメーション 勉強
会
CSSでアニメーション！
その２

2. つづき
• その１のつづき！

3. 注意事項
• この資料の中には、2012/0７時点での事実が書いてあるつもりで
すが、時代とともに移り変わる情報もあるので最新情報のチェック
も忘れずに！現時点では、HTML5を始めもろもろの仕様は確定し
ていません。なるべく新しい仕様を見ているつもりですが、情報古
かったらすみません。
• ざっくり説明するために、簡単に説明しています。厳密にいうと
ちょっと違う部分もあるかと思います。でもまあ、だいたいあって
る（はず）。
• 過去の環境（IE6とかIE7とか、PHP4とか）には採用されていない
話もあるので、その辺をターゲットにする場合は注意（無視してい
いと思うけど）
• リンクは日本語訳がある場合はそっちにリンクしています。公式情
報ではないので、仕事で使う場合は原文を確認しましょう。

4. 行列変換
• matrix(a, c, b, d, tx, ty)で、行列変換がで
きる！
• なんかむずかしいからよくわかんないけ
ど！！
• ちなみに、javascriptからtransformの値
を取るとrotateとかしか指定してなくても、
matrixしか取得できないからめんどくさ
い！

5. やってみよう
#ex07{
-moz-transform: matrix(1, 0, 0.6, 1,
20px, 0);
}
<div class="sample">
<div class="bg"></div>
<div id="ex07" class="ex">ex07</div>
</div>

6. できた
• ふーん

7. おまけ
<script>
$(function(){
$('.ex').each(function(index, element) {
console.log($(this).css('-moz-
transform'));
});
});
</script>

8. できた
• 全部matrixになってる＞＜

9. 3d
• 2Dの関数と同じような奴が3Dにもあるの
で、まずはそれをやってみよう！
• 3Dの場合は、x,yの他に奥行きを表すzが
加わります。
• zは、プラスになると近づいて、マイナス
になると遠くになります。

10. じゅんびしよう１
ななめからみてみよう
.sample3d{
-moz-transform:rotateX(-20deg)
rotateY(-20deg);
}

11. じゅんびしよう２
<div class="sample sample3d">
<div class="bg"></div>
<div id="ex08" class="ex">ex08</
div>
</div>
※ex08からex17までつくろう！

12. やってみよう１
#ex08{
-moz-transform:translate3d(20px, 0,
20px);
}
#ex09{
-moz-transform:translate3d(20px, 0,
-20px);
}
#ex10{
-moz-transform:rotate3d(1, 0, 0, 45deg);
}

13. やってみよう２
#ex11{
-moz-transform:rotate3d(0, 1, 0, 45deg);
}
#ex12{
-moz-transform:rotate3d(0, 0, 1, 45deg);
}
#ex13{
-moz-transform:scale3d(1.5, 1, 1);
}

14. やってみよう３
#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);
}

15. せつめい
• translate3d(tx, ty, tz)と、scale3d(sx,
sy, sz)はz座標の指定が増えた！
• rotate3d(x, y, z, angle)は、回転軸と角度
を指定できるように！
• skew(ax, ay)はそのまま！平面なのでzの
傾きはないため。

16. できた
• なんにもかわらない場所がある・・・？

17. Perspective
• Perspective(d)で、遠近法みたいな感じ
にできる

18. やってみよう
#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);
}

19. できた
• なるほど！

20. めも
#ex21{
-moz-perspective:100px;
-moz-transform:translate3d(0, 0,
-20px);
}
perspectiveっていうのもあるんだけど、
firefoxは対応してない。

21. 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

22. transform-style
• transform-styleをつかうと、要素が3dか
2dを指定できる！
• preserve-3d、 flatで、3dか2dを指定。
• firefoxは対応してない＞＜

23. TIPS
• iPhoneだとtransformの動きがカクカクし
てしまいます。
• これを防ぐには、transform-styleで3Dを使
用するように設定するといい！
• 3Dを使うようにすると、GPUアクセラレー
タが使用され、処理が改善されます。
.XXX {
-webkit-transform-style: preserve-3d;
}

24. まとめ
• transformをつかうと、いままでになかっ
た変形ができる！

25. 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/

26. じゅんびしよう
• base.htmlをコピーして、
transitions.htmlを作ろう

27. せつめい
• 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
– 実行が開始されるまでの待ち時間を指定します。マイナスを指定
すると、アニメを途中から開始できます。

28. やってみよう１
#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;
}

29. やってみよう２
<div class="sample">
<div class="bg"></div>
<div id="ex01" class="ex">ex01</
div>
</div>

30. できた
• マウスをのせるとトランジションしなが
ら色が変わる！
• 画面読み込み時にはトランジションしな
い！

31. 開始トリガー
• :hoverやjavascriptを使って、トランジ
ションを開始しよう！

32. イージング
• transition-timing-functionに指定するこ
とで、いろいろ変更できる！
• 自分でも作れるから作ってみよう！
• CSS transition function manipulator
– http://cssglue.com/cubic

33. イベント
• transitionの開始時、終了時に、
javascriptでイベントを拾うことができ
る！
• webkitTransitionEnd,transitionend,MS
TransitionEnd,oTransitionEnd,webkitTr
ansitionEndなどブラウザごとに名前が違
うのでたるい・・・。
• transitionstartはfirefoxだと動かないみ
たい＞＜

34. やってみよう
$(function(){
$(".sample").bind("transitionend",function(){
console.log(this);
});
});

35. できた
• トランジションが終わるとイベントが発生
してログが出る！

36. おうよう
#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;
}

37. できた
• たくさんログが出た・・・
• 変化するプロパティの数だけ、イベントが
発生してログが出る！
• その割には、数が多い・・・。よくわか
んない＞＜

38. まとめ
• 手軽にアニメーションできたり、イージン
グまで出来るのは便利！

39. animations
• キーフレームを定義してアニメーションで
きる！
• CSS animations
– https://developer.mozilla.org/ja/CSS/
CSS_animations
• CSS Animations Editor s Draft
– http://dev.w3.org/csswg/css3-
animations/

40. じゅんびしよう
• base.htmlをコピーして、
animations.htmlを作ろう

41. せつめい１
• animation-delay
– 開始までの遅延時間
• animation-direction
– アニメーションするたびに、もどるか最初からす
るかなどを設定（normal, alternate, reverse,
alternate-reverse）
• animation-duration
– アニメーションの長さ
• animation-iteration-count
– 繰り返し回数。infiniteで無限

42. せつめい２
• animation-name
– キーフレームの名前
• animation-play-state
– アニメーションの状態を指定できる（paused、
running ）。今後なくなるかもしれない。
• animation-timing-function
– イージング
• animation-fill-mode
– アニメーションの実行前後に、指定したスタイル
を適用するかどうか

43. やってみよう１
#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;
}

44. やってみよう２
@-moz-keyframes ex01{
from{
background-color:rgba(0, 255, 0,
0.5);
}
to{
background-color:rgba(255, 0, 0, 0.5);
}
}

45. やってみよう３
<div class="sample">
<div class="bg"></div>
<div id="ex01" class="ex">ex01</
div>
</div>

46. できた
• ページのよみこみがおわると、てんめつ
する！

47. イベント
• アニメーションの開始、終了、繰り返し
の開始時にanimationstart,
animationend, animationiterationを拾
うことができる！
• これもブラウザごとに名前が違うのでたる
い・・・。

48. やってみよう
$(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);
});
});

49. できた
• てんめつしたらログが出る！
• startのログは出ない！（スタートのタイ
ミングでは、jQueryが実行されてないの
で）

50. おうよう
• キーフレームはたくさん指定できる！
• fromが0%,toが100%なので、そのあい
だのキーフレームを指定できる！

51. やってみよう１
#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;
}

52. やってみよう２
@-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);
}
}

53. できた
• いろがかわる！

54. canvas
• Web上で画像を描画する技術
• canvasタグで指定した範囲内に自由に描
画することができる
• クライアントで描画できるため、動的な
画像（グラフ、カウンタ、時計など）や
ゲームなどに採用するといいと思う。
• Canvas チュートリアル
– https://developer.mozilla.org/ja/
Canvas_tutorial

55. みてみよう
• おえかきとか簡単に作れる！

56. じゅんびしよう
• base.htmlをコピーして、canvas.htmlを
作ろう

57. やってみよう１
body{
background-color:#BECBAD;
}
#canvas{
margin:20px 20px 20px 30px;
box-shadow:3px 3px 3px rgba(0, 0,
0, 0.3);
}

58. やってみよう２
$(function(){
var canvas = $('#canvas').get(0);
var context = canvas.getContext('2d');
context.fillStyle = "rgb(128, 255,
255)";

59. やってみよう３
var x = 480;
function draw(){
x -= 8;
if(x < -img.width){
x = 480;
}
context.fillRect(0, 0, canvas.width, canvas.height);
context.drawImage(img, x, 220);
setTimeout(draw, 50);
}

60. やってみよう４
var img = new Image();
img.src = "tolemorou_mini.png";
img.onload = function(){
setTimeout(draw, 50);
}
});

61. できた
• トレモ郎がうごいた！

62. かいせつ１
img.onload = function(){
setTimeout(draw, 50);
}
画像の読み込みが終わったら、アニメー
ションを開始する

63. かいせつ２
x -= 8;
if(x < -img.width){
x = 480;
}
座標を­８することで、画像の表示位置を左
にずらす。画面はじから消えたら、座標を
右側に戻す

64. かいせつ３
context.fillRect(0, 0, canvas.width, canvas.height);
context.drawImage(img, x, 220);
setTimeout(draw, 50);
画面を消去
↓
キャラクターを書く
↓
50ミリ秒後に描画

65. まとめ
• canvasは自由に表現できる！

66. jQueryのアニメーション
• jQueryのアニメーションは、大きく分け
て２種類
• animate()などを使って要素のCSSのプロ
パティを変更する方法。簡単だが、対応
していないプロパティがある。
• 要素のclassを変更して、別のcssを適用
させる方法。transitionsやanimationsと
あわせて使うとアニメーションを開始で
きる

67. じゅんびしよう
• base.htmlをコピーして、jQuery.htmlを
作ろう

68. やってみよう１
$(function(){
$('#ex01').animate(
{
width:'400px'
},
5000,
'swing',
function(){
console.log("end");
}
);
});

69. やってみよう２
<div class="sample">
<div class="bg"></div>
<div id="ex01" class="ex">ex01</
div>
</div>

70. できた
• よこにのびた！

71. かいせつ１
{
width:'400px
},
CSSのパラメータを指定できます。このとき、
margin-leftはmarginLeftみたいにして記述し
ます。
背景色など、数値じゃないパラメータは無視さ
れます。

72. かいせつ２
• イージングは、 liner 、 swing 以外にもプ
ラグインで追加できます。
• jQuery easing plugin
– http://gsgd.co.uk/sandbox/jquery/
easing/

73. やってみよう１
.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;
}

74. やってみよう２
@-moz-keyframes ex02{
from{
background-color:rgba(0, 255, 0,
0.5);
}
to{
background-color:rgba(255, 0, 0, 0.5);
}
}

75. やってみよう３
$('#ex02').click(function(e){
$(this).toggleClass('ex02');
});

76. できた
• くりっくすると色が変わる！
• もっかいくりっくすると元に戻る！

77. かいせつ
• jQueryを使うと、クリックなどcssにはな
いイベントをトリガにアニメーションがで
きる！
• cssを使うことで、背景色の変化など、
jQueryではできなかったアニメーション
ができる！

78. まとめ
• jQuery+CSS3で、表現力が上がった！

79. おわり
主催（共同開催）：
株式会社 gooya
http://www.gooya.co.jp/
メドレー株式会社
http://www.medley.co.jp/
講師：西田 寛輔 (Tonosamart)
http://www.facebook.com/tonosamart