Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Hello, CSS Animation!!
Hello, CSS Animation!!
はじめまして
• 名前: 内 慎一朗(くめうち しんいちろう)
• 仕事:キヤノンITソリューションズ株式会社

   自社製品開発でiOSアプリ、Webアプリの

   UI/UXデザイン、フロン...
Hello, CSS Animation!!
はじめまして(^o^)
• 趣味:登山、カメラ、アーチェリー、カレー
• マイブーム:スプラトゥーン
• 猫(ロシアンブルー)
Hello, CSS Animation!!
今日お話しする内容
• CSS Animationって?
• どうやって動かすの?
• 動いているところを見ないと始まらない!
• JavaScriptと何が違うの?
• アニメーションって必要?
What?
CSS Animationって?
Hello, CSS Animation!!
Hello, CSS Animation!!
ブラウザで
アニメーションする方法って?
Hello, CSS Animation!!
• アニメーションGIF
• 特殊なHTMLタグ
• Flash/SilverlightなどPlugin
• JavaScript
• CSS3
Hello, CSS Animation!!
–MDNより
https://developer.mozilla.org/ja/docs/Web/Guide/CSS/
Using_CSS_animations
CSS3 アニメーション は、ある ...
Hello, CSS Animation!!
だいたいのブラウザでは使えますが、
Win7標準のIE8は使えないので注意。
- Can I use… http://caniuse.comより
Hello, CSS Animation!!
CSSによるスタイルの設定の変化を
アニメーションする
.before	 {

width:	 100px;

height:	 100px;

}
.after	 {

width:	 200px...
Hello, CSS Animation!!
どのタイミングで
どんな変化を
どんな感じに
Hello, CSS Animation!!
アニメーションできるスタイルの設定
background-color/background-position/border/border-
color/border-radius/border-sp...
Hello, CSS Animation!!
どのタイミングで
どんな変化を
どんな感じに
Hello, CSS Animation!!
アニメーションの設定
Hello, CSS Animation!!
• アニメーションが開始されるまでの時間
• アニメーションの所要時間
• アニメーションの遷移速度
• アニメーションの繰り返しの有無
How?
どうやって動かすの?
Hello, CSS Animation!!
Hello, CSS Animation!!
必要なCSSプロパティ
•transition
•animation
お手軽
高度な設定
Hello, CSS Animation!!
transition
• スタイル設定の変化の時間的な移り変わりを設定。
• スタイルが変化した際に、どれぐらいの時間をかけ
て変化を適用していくかを設定する。
• どんな変化をするかは担当せずに、...
Hello, CSS Animation!!
transition
transition-property
アニメーションしたいスタイル
複数指定する場合はカンマ(,)で区切る
transition-duration アニメーションの所要時間
...
Hello, CSS Animation!!
transition
#demo	 {

width:	 100px;

height:	 100px;

background:	 tomato;

transition-property:	 w...
Hello, CSS Animation!!
animation
• アニメーションするために必要な情報を設定。
• どれぐらいの時間をかけてスタイルの変化を適用し
ていくかを設定する。
• どんな変化をするか、どのように変化していくかを
すべ...
Hello, CSS Animation!!
animation
animation-name アニメーションの名前を設定
animation-duration アニメーションの所要時間
animation-timing-
function
ア...
Hello, CSS Animation!!
animation-2
animation-play-state アニメーションの再生・停止
animation-delay アニメーション開始までの時間
animation-fill-mode
アニ...
Hello, CSS Animation!!
animation-3
• @keyframes [アニメーション名]
• 設定したアニメーション名の遷移スタイルとタイミ
ング配分を記述。
• 0%:開始 ∼ 100%:終了の要領で記述する。
Hello, CSS Animation!!
animation
#demo	 {

width:	 100px;

height:	 100px;

background:	 yellow;

}

#demo:hover	 {

anima...
Hello, CSS Animation!!
XX-timing-functionについて
• 変遷のパターン。
• 言葉で説明するのは難しいので直接見て把握してください。
- http://codepen.io/Rayuel/pen/jsca...
Demo
動いているところを見ないと始まらない!
Hello, CSS Animation!!
Hello, CSS Animation!!
アニメーション名
#demo	 {

	 /*	 CSS	 demo	 code	 */

}

function	 demo(){

//	 JavaScript	 demo	 code

}
<...
Hello, CSS Animation!!
動作確認はCODEPENを使用
※インターネット接続があれば・・・
CODEPEN http://codepen.io
Hello, CSS Animation!!
マウスカーソルを合わせると大きくなる
#demo	 {

	 	 width:	 100px;

	 	 height:	 100px;

	 	 background:	 tomato;

	 	...
Hello, CSS Animation!!
マウスカーソルを合わせると
2段階で大きくなったり色が変わる
#demo	 {

width:	 100px;

height:	 100px;

background:	 khaki;

}

#...
Hello, CSS Animation!!
マウスダウンで裏返って
離すと元に戻る
#demo	 {

	 	 width:	 100px;

	 	 height:	 100px;

	 	 border-radius:	 50%;

	 ...
Hello, CSS Animation!!
今流行りのゴーストボタン
body	 {

	 background:url("https://dl.dropboxusercontent.com/s/roze464btthub5a/写
真%202...
Hello, CSS Animation!!
$("#switch").click(	 function(){

	 	 $("#demo1").toggleClass("showMenu");

	 	 $("#demo2").toggleC...
Hello, CSS Animation!!
$("#switch").click(	 function(){

	 	 $("#demo1").toggleClass("showMenu");

	 	 $("#demo1").toggleC...
What’s the difference?
JavaScriptとの違いは?
Hello, CSS Animation!!
Hello, CSS Animation!!
JavaScript(jQuery)でも
アニメーションできます
$("#demo").hover(

	 	 function(){

	 	 	 	 $(this).animate({

	 	...
Hello, CSS Animation!!
CSSアニメーションと
JSアニメーションの違い
• 動作ブラウザ
• JSアニメーションはCPUが制御

CSSアニメーションはCPU、GPU併用
• CSSアニメーションはブラウザに依存する分、...
Hello, CSS Animation!!
動作ブラウザ
• JavaScript(jQuery)なら、何も怖くない。

そう、IE6だって。

でも、変化するスタイルには注意。
• CSS3はイマドキのブラウザ以外は未対応。

スマホならあ...
Hello, CSS Animation!!
transition
- Can I use… http://caniuse.comより
Hello, CSS Animation!!
animation
- Can I use… http://caniuse.comより
Hello, CSS Animation!!
2D transform
- Can I use… http://caniuse.comより
Hello, CSS Animation!!
3D transform
- Can I use… http://caniuse.comより
Hello, CSS Animation!!
CPU制御/GPU制御
• JavaScriptによるアニメーションは、CPUが直接処理を行
う。
• CSSによるアニメーションは、

CPUがGPUに命令を出すCPU/GPU併用の処理になる。
...
Hello, CSS Animation!!
どうすればいいのか
• なるべくtransformを使う

transformは開始と終了の2点の演算になります。
leftとかtopとか数値指定はCPU担当。
• transformだからって.j...
Hello, CSS Animation!!
見た目の処理は CSSにお任せ
• .jsにはデータの処理を任せて、見た目の処理はすべ
てCSSに任せてしまう。
• .jsはせいぜい、classの付け外しぐらいにする。
• .jsのコードが綺麗に...
Is it Necessary?
アニメーションって必要?
Hello, CSS Animation!!
Hello, CSS Animation!!
–名も無きSE
アニメーションとかバグのリスクが増えるだけ
だからやめて欲しい
Hello, CSS Animation!!
–名も無きPL
アニメーションしなくても機能は満たしている
んでしょ?
Hello, CSS Animation!!
正直+αなものです。
Hello, CSS Animation!!
どれだけ+にできるかが
重要です。
Hello, CSS Animation!!
アニメーションが効果的な箇所
• タッチ操作ではホバーが効かないのでタッチ時に
• 画面上の要素が変化した時
• 待機中の状態を知らせる場合
• 特に注意を惹きつけたい場合
• 注目させたい要素では...
Hello, CSS Animation!!
より良い
ユーザ体験を提供するために
アニメーションしましょう。
Today’s recap
おさらい
Hello, CSS Animation!!
Hello, CSS Animation!!
今日の内容を1ページに
• CSSのスタイル設定でアニメーションできる機能。
• お手軽にtransitionでアニメーション。
• がっつりanimationでアニメーション。
• CSSアニメー...
Thank you for your kind
attention!!
ご静聴、ありがとうございました。
Hello, CSS Animation!!
@kumetter Follow me!!
Upcoming SlideShare
Loading in …5
×

Hello css animation_public

510 views

Published on

AITC女子会 第一回勉強会「最新技術を学ぶ〜Web編〜」&交流会にて発表した内容になります。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Hello css animation_public

  1. 1. Hello, CSS Animation!!
  2. 2. Hello, CSS Animation!! はじめまして • 名前: 内 慎一朗(くめうち しんいちろう) • 仕事:キヤノンITソリューションズ株式会社
    自社製品開発でiOSアプリ、Webアプリの
    UI/UXデザイン、フロントエンドを担当。
    Objective-C / HTML, CSS, JavaScript
  3. 3. Hello, CSS Animation!! はじめまして(^o^) • 趣味:登山、カメラ、アーチェリー、カレー • マイブーム:スプラトゥーン • 猫(ロシアンブルー)
  4. 4. Hello, CSS Animation!! 今日お話しする内容 • CSS Animationって? • どうやって動かすの? • 動いているところを見ないと始まらない! • JavaScriptと何が違うの? • アニメーションって必要?
  5. 5. What? CSS Animationって? Hello, CSS Animation!!
  6. 6. Hello, CSS Animation!! ブラウザで アニメーションする方法って?
  7. 7. Hello, CSS Animation!! • アニメーションGIF • 特殊なHTMLタグ • Flash/SilverlightなどPlugin • JavaScript • CSS3
  8. 8. Hello, CSS Animation!! –MDNより https://developer.mozilla.org/ja/docs/Web/Guide/CSS/ Using_CSS_animations CSS3 アニメーション は、ある CSS のスタ イル設定を別の設定へ遷移させることを可能に します。
  9. 9. Hello, CSS Animation!! だいたいのブラウザでは使えますが、 Win7標準のIE8は使えないので注意。 - Can I use… http://caniuse.comより
  10. 10. Hello, CSS Animation!! CSSによるスタイルの設定の変化を アニメーションする .before { width: 100px; height: 100px; } .after { width: 200px; height: 200px; }
  11. 11. Hello, CSS Animation!! どのタイミングで どんな変化を どんな感じに
  12. 12. Hello, CSS Animation!! アニメーションできるスタイルの設定 background-color/background-position/border/border- color/border-radius/border-spacing/bottom/box- shadow/clip/color/font-size/font-weight/height/left/ letter-spacing/line-height/margin-bottom/margin-left/ margin-right/margin-top/max-height/max-width/min- height/min-width/opacity/outline-color/outline-width/ padding/text-indent/text-shadow/transform/top/ vertical-align/visibility/width/word-spacing/z-index
 
 - W3C CSS Transitionsより
 http://www.w3.org/TR/css3-transitions/#transition-property
  13. 13. Hello, CSS Animation!! どのタイミングで どんな変化を どんな感じに
  14. 14. Hello, CSS Animation!! アニメーションの設定
  15. 15. Hello, CSS Animation!! • アニメーションが開始されるまでの時間 • アニメーションの所要時間 • アニメーションの遷移速度 • アニメーションの繰り返しの有無
  16. 16. How? どうやって動かすの? Hello, CSS Animation!!
  17. 17. Hello, CSS Animation!! 必要なCSSプロパティ •transition •animation お手軽 高度な設定
  18. 18. Hello, CSS Animation!! transition • スタイル設定の変化の時間的な移り変わりを設定。 • スタイルが変化した際に、どれぐらいの時間をかけ て変化を適用していくかを設定する。 • どんな変化をするかは担当せずに、どのように変化 していくかのみを担当するので簡単に記述できる。 ※transitionは移り変わり、変遷って意味。
  19. 19. Hello, CSS Animation!! transition transition-property アニメーションしたいスタイル 複数指定する場合はカンマ(,)で区切る transition-duration アニメーションの所要時間 transition-timing- function アニメーションの遷移速度 transition-delay アニメーション開始までの時間 transition 上記プロパティをまとめて記述 半角スペースで区切る
  20. 20. Hello, CSS Animation!! transition #demo { width: 100px; height: 100px; background: tomato; transition-property: width,height; transition-duration: 1s; transition-timer-function: ease; transition-delay: 0; } #demo:hover { width: 200px; height: 200px; }
  21. 21. Hello, CSS Animation!! animation • アニメーションするために必要な情報を設定。 • どれぐらいの時間をかけてスタイルの変化を適用し ていくかを設定する。 • どんな変化をするか、どのように変化していくかを すべて設定するのでより細かいアニメーションの設 定が可能。
  22. 22. Hello, CSS Animation!! animation animation-name アニメーションの名前を設定 animation-duration アニメーションの所要時間 animation-timing- function アニメーションの遷移速度 animation-iteration- count アニメーションの繰り返し animation-direction 繰り返すときに逆再生するかどうか
  23. 23. Hello, CSS Animation!! animation-2 animation-play-state アニメーションの再生・停止 animation-delay アニメーション開始までの時間 animation-fill-mode アニメーション終了後にスタイルを 維持するか元に戻すか animation 前項までの項目をまとめて記述 半角スペースで区切る
  24. 24. Hello, CSS Animation!! animation-3 • @keyframes [アニメーション名] • 設定したアニメーション名の遷移スタイルとタイミ ング配分を記述。 • 0%:開始 ∼ 100%:終了の要領で記述する。
  25. 25. Hello, CSS Animation!! animation #demo { width: 100px; height: 100px; background: yellow; } #demo:hover { animation: demoAnimate 1s ease 0 infinite alternate; } @keyframes demoAnimate { 0%{width:100px; height:100px; background:yellow;} 50%{width:150px; height:150px; background:orange;} 100%{width:200px; height:200px; background:red;} } animation-name animation-duration animation-timing-function animation-delay animation-iterate-count animation-direction
  26. 26. Hello, CSS Animation!! XX-timing-functionについて • 変遷のパターン。 • 言葉で説明するのは難しいので直接見て把握してください。 - http://codepen.io/Rayuel/pen/jscal
 linear 一定間隔で変化していく。 ease ゆっくり開始し、徐々に早くなり、急に減速して終了。 ease-in ゆっくり開始し、徐々に早くなる。 ease-out 素早く開始し、徐々に減速していく。 ease-in-out ゆっくり開始し、徐々に早くなり、徐々に減速していく。
  27. 27. Demo 動いているところを見ないと始まらない! Hello, CSS Animation!!
  28. 28. Hello, CSS Animation!! アニメーション名 #demo { /* CSS demo code */ } function demo(){ // JavaScript demo code } <html> <!— html demo tag —> </html>
  29. 29. Hello, CSS Animation!! 動作確認はCODEPENを使用 ※インターネット接続があれば・・・ CODEPEN http://codepen.io
  30. 30. Hello, CSS Animation!! マウスカーソルを合わせると大きくなる #demo { width: 100px; height: 100px; background: tomato; transition: 0.3s ease; } #demo:hover { width: 200px; height: 200px; }
  31. 31. Hello, CSS Animation!! マウスカーソルを合わせると 2段階で大きくなったり色が変わる #demo { width: 100px; height: 100px; background: khaki; } #demo:hover { animation: demoAnimate 1s ease 0 infinite alternate; } @keyframes demoAnimate { 0%{width:100px; height:100px; background:khaki;} 50%{width:150px; height:150px; background:orange;}100%{width: 200px; height:200px; background:tomato;} }
  32. 32. Hello, CSS Animation!! マウスダウンで裏返って 離すと元に戻る #demo { width: 100px; height: 100px; border-radius: 50%; background: khaki; transition: 0.3s ease-out; text-align: center; line-height: 95px; } #demo:after{ content:"omote"; } #demo:active { transform: rotateY(180deg); background: darkkhaki; } #demo:active:after { content:"ura"; }
  33. 33. Hello, CSS Animation!! 今流行りのゴーストボタン body { background:url("https://dl.dropboxusercontent.com/s/roze464btthub5a/写 真%202015-04-28%206%2058%2006.jpg"); background-size: cover; text-align: center; } #demo { margin: 20px; width: 200px; height: 60px; border: 1px solid #FFFFFF; background: rgba(255,255,255,0); color: #FFFFFF; font-size: 20px; cursor: pointer; transition: 0.3s ease-out; } #demo:hover { background: rgba(255,255,255,0.4); transition: none; } #demo:active { padding-top: 5px; } <body> <button id="demo">Ghost Button</button> </body>
  34. 34. Hello, CSS Animation!! $("#switch").click( function(){ $("#demo1").toggleClass("showMenu"); $("#demo2").toggleClass("showMenu"); $(this).toggleClass("showMenu"); }); 横からメニューが出てくる div { display: inline-block; margin:0; padding:0; position:absolute; transition: 0.3s ease-out; } button, button.showMenu:hover { width: 40px; height: 40px; margin: 8px; background-color: PeachPuff; border: 1px solid peru; font-size: 40px; line-height: 0px; } button:hover, button:active, button.showMenu { background-color: RosyBrown; } #demo1 { height: 500px; width: 200px; left: -200px; z-index: 10; background-color: tomato; } #demo1.showMenu { left: 0px; box-shadow: #333 0px 0px 5px 0px; } #demo2 { height: 500px; width: 500px; background-color: orange; } #demo2.showMenu { left: 200px; } <div id="demo1"></div> <div id="demo2"> <button id="switch">≡</button> </div>
  35. 35. Hello, CSS Animation!! $("#switch").click( function(){ $("#demo1").toggleClass("showMenu"); $("#demo1").toggleClass("hideMenu"); $("#demo2").toggleClass("showMenu"); $("#demo2").toggleClass("hideMenu"); $(this).toggleClass("showMenu"); }); 横からメニューが出てくる2 div { display: inline-block; margin:0; padding:0; position:absolute; } button, button.showMenu:hover { width: 40px; height: 40px; margin: 8px; background-color: PeachPuff; border: 1px solid peru; font-size: 40px; line-height: 0px; } button:hover, button:active, button.showMenu { background-color: RosyBrown; } #demo1 { height: 500px; width: 220px; left: -220px; z-index: 10; background-color: tomato; } #demo1.showMenu { box-shadow: #333 0px 0px 5px 0px; animation: demo1Animation 0.2s ease-out 0; animation-fill-mode: forwards; } #demo1.hideMenu { animation: demo1AnimationHide 0.2s ease-out 0; animation-fill-mode: forwards; } #demo2 { height: 500px; width: 500px; background-color: orange; } #demo2.showMenu { animation: demo2Animation 0.2s ease-out 0; animation-fill-mode: forwards; } #demo2.hideMenu { animation: demo2AnimationHide 0.2s ease-out 0; animation-fill-mode: forwards; } @keyframes demo1Animation { 0% { left: -220px;} 90% { left: -10px;} 100% {left: -20px;} } @keyframes demo1AnimationHide { 0% { left: -20px;} 90% { left: -230px;} 100% {left: -220px;} } @keyframes demo2Animation { 0% { left: 0px;} 90% { left: 210px;} 100% {left: 200px;} } @keyframes demo2AnimationHide { 0% { left: 200px;} 90% { left: -10px;} 100% {left: 0px;} } <div id="demo1" class="hideMenu"></div> <div id="demo2" class="hideMenu"> <button id="switch">≡</button> </div>
  36. 36. What’s the difference? JavaScriptとの違いは? Hello, CSS Animation!!
  37. 37. Hello, CSS Animation!! JavaScript(jQuery)でも アニメーションできます $("#demo").hover( function(){ $(this).animate({ width: "200px", height: "200px" },300); }, function(){ $(this).animate({ width: "100px", height: "100px" },300); } #demo { width: 100px; height: 100px; background: tomato; }
  38. 38. Hello, CSS Animation!! CSSアニメーションと JSアニメーションの違い • 動作ブラウザ • JSアニメーションはCPUが制御
 CSSアニメーションはCPU、GPU併用 • CSSアニメーションはブラウザに依存する分、最 適化された処理を行ってくれる • JSに書くか、CSSに書くか
  39. 39. Hello, CSS Animation!! 動作ブラウザ • JavaScript(jQuery)なら、何も怖くない。
 そう、IE6だって。
 でも、変化するスタイルには注意。 • CSS3はイマドキのブラウザ以外は未対応。
 スマホならあんまり気にしなくてもいい。
 IE8∼9は未対応。
  40. 40. Hello, CSS Animation!! transition - Can I use… http://caniuse.comより
  41. 41. Hello, CSS Animation!! animation - Can I use… http://caniuse.comより
  42. 42. Hello, CSS Animation!! 2D transform - Can I use… http://caniuse.comより
  43. 43. Hello, CSS Animation!! 3D transform - Can I use… http://caniuse.comより
  44. 44. Hello, CSS Animation!! CPU制御/GPU制御 • JavaScriptによるアニメーションは、CPUが直接処理を行 う。 • CSSによるアニメーションは、
 CPUがGPUに命令を出すCPU/GPU併用の処理になる。 • GPUは描画演算が得意だけど、
 CPUから指示をもらわないと働けない。 • 要はCSSアニメーションを使うだけでぬるぬる動かせるわけ じゃなくて、ちゃんとした使い方をしないとぬるぬる動かない。
  45. 45. Hello, CSS Animation!! どうすればいいのか • なるべくtransformを使う
 transformは開始と終了の2点の演算になります。 leftとかtopとか数値指定はCPU担当。 • transformだからって.jsで小刻みに処理していたら 意味がないので注意。 • あんまり気にしない。
  46. 46. Hello, CSS Animation!! 見た目の処理は CSSにお任せ • .jsにはデータの処理を任せて、見た目の処理はすべ てCSSに任せてしまう。 • .jsはせいぜい、classの付け外しぐらいにする。 • .jsのコードが綺麗になって本来すべきデータの処理 に集中することができる。
  47. 47. Is it Necessary? アニメーションって必要? Hello, CSS Animation!!
  48. 48. Hello, CSS Animation!! –名も無きSE アニメーションとかバグのリスクが増えるだけ だからやめて欲しい
  49. 49. Hello, CSS Animation!! –名も無きPL アニメーションしなくても機能は満たしている んでしょ?
  50. 50. Hello, CSS Animation!! 正直+αなものです。
  51. 51. Hello, CSS Animation!! どれだけ+にできるかが 重要です。
  52. 52. Hello, CSS Animation!! アニメーションが効果的な箇所 • タッチ操作ではホバーが効かないのでタッチ時に • 画面上の要素が変化した時 • 待機中の状態を知らせる場合 • 特に注意を惹きつけたい場合 • 注目させたい要素ではなく、ユーザの次の目的を想 定して注目させる
  53. 53. Hello, CSS Animation!! より良い ユーザ体験を提供するために アニメーションしましょう。
  54. 54. Today’s recap おさらい Hello, CSS Animation!!
  55. 55. Hello, CSS Animation!! 今日の内容を1ページに • CSSのスタイル設定でアニメーションできる機能。 • お手軽にtransitionでアニメーション。 • がっつりanimationでアニメーション。 • CSSアニメーションはGPU併用処理とはいえ万能ではない。 • 動きを設定する場合、transformを使うとぬるぬる。 • アニメーションはより効果的な箇所で使って価値を高める。
  56. 56. Thank you for your kind attention!! ご静聴、ありがとうございました。 Hello, CSS Animation!! @kumetter Follow me!!

×