Hello css animation_public

Hello, CSS Animation!!
はじめまして
• 名前：内慎一朗（くめうちしんいちろう）
• 仕事：キヤノンＩＴソリューションズ株式会社 
自社製品開発でiOSアプリ、Webアプリの 
UI/UXデザイン、フロントエンドを担当。 
Objective-C / HTML, CSS, JavaScript

はじめまして(^o^)
• 趣味：登山、カメラ、アーチェリー、カレー
• マイブーム：スプラトゥーン
• 猫（ロシアンブルー）

今日お話しする内容
• CSS Animationって？
• どうやって動かすの？
• 動いているところを見ないと始まらない！
• JavaScriptと何が違うの？
• アニメーションって必要？

What?
CSS Animationって？

ブラウザで
アニメーションする方法って？

• アニメーションGIF
• 特殊なHTMLタグ
• Flash/SilverlightなどPlugin
• JavaScript
• CSS3

–MDNより
https://developer.mozilla.org/ja/docs/Web/Guide/CSS/
Using_CSS_animations
CSS3 アニメーションは、ある CSS のスタ
イル設定を別の設定へ遷移させることを可能に
します。

だいたいのブラウザでは使えますが、
Win7標準のIE8は使えないので注意。
- Can I use… http://caniuse.comより

CSSによるスタイルの設定の変化を
アニメーションする
.before {

width: 100px;

height: 100px;

}
.after {

width: 200px;

height: 200px;

}

どのタイミングで
どんな変化を
どんな感じに

アニメーションできるスタイルの設定
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

アニメーションの設定

• アニメーションが開始されるまでの時間
• アニメーションの所要時間
• アニメーションの遷移速度
• アニメーションの繰り返しの有無

How?
どうやって動かすの？

必要なCSSプロパティ
•transition
•animation
お手軽
高度な設定

transition
• スタイル設定の変化の時間的な移り変わりを設定。
• スタイルが変化した際に、どれぐらいの時間をかけ
て変化を適用していくかを設定する。
• どんな変化をするかは担当せずに、どのように変化
していくかのみを担当するので簡単に記述できる。
※transitionは移り変わり、変遷って意味。

transition
transition-property
アニメーションしたいスタイル
複数指定する場合はカンマ(,)で区切る
transition-duration アニメーションの所要時間
transition-timing-
function
アニメーションの遷移速度
transition-delay アニメーション開始までの時間
transition
上記プロパティをまとめて記述
半角スペースで区切る

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;

}

animation
• アニメーションするために必要な情報を設定。
• どれぐらいの時間をかけてスタイルの変化を適用し
ていくかを設定する。
• どんな変化をするか、どのように変化していくかを
すべて設定するのでより細かいアニメーションの設
定が可能。

animation
animation-name アニメーションの名前を設定
animation-duration アニメーションの所要時間
animation-timing-
function
アニメーションの遷移速度
animation-iteration-
count
アニメーションの繰り返し
animation-direction 繰り返すときに逆再生するかどうか

animation-2
animation-play-state アニメーションの再生・停止
animation-delay アニメーション開始までの時間
animation-ﬁll-mode
アニメーション終了後にスタイルを
維持するか元に戻すか
animation
前項までの項目をまとめて記述
半角スペースで区切る

animation-3
• @keyframes [アニメーション名]
• 設定したアニメーション名の遷移スタイルとタイミ
ング配分を記述。
• 0%：開始 ∼ 100%：終了の要領で記述する。

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

XX-timing-functionについて
• 変遷のパターン。
• 言葉で説明するのは難しいので直接見て把握してください。
- http://codepen.io/Rayuel/pen/jscal 
linear 一定間隔で変化していく。
ease ゆっくり開始し、徐々に早くなり、急に減速して終了。
ease-in ゆっくり開始し、徐々に早くなる。
ease-out 素早く開始し、徐々に減速していく。
ease-in-out ゆっくり開始し、徐々に早くなり、徐々に減速していく。

Demo
動いているところを見ないと始まらない！

アニメーション名
#demo {

/* CSS demo code */

}

function demo(){

// JavaScript demo code

}
<html>
<!— html demo tag —>
</html>

動作確認はCODEPENを使用
※インターネット接続があれば・・・
CODEPEN http://codepen.io

マウスカーソルを合わせると大きくなる
#demo {

width: 100px;

height: 100px;

background: tomato;

transition: 0.3s ease;

}

#demo:hover {

width: 200px;

height: 200px;

}

マウスカーソルを合わせると
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;}

}

マウスダウンで裏返って
離すと元に戻る
#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";

}

今流行りのゴーストボタン
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;


}

#demo:hover {

background: rgba(255,255,255,0.4);

transition: none;

}

#demo:active {

padding-top: 5px;

}
<body>
<button id="demo">Ghost Button</button>
</body>

$("#switch").click( function(){

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


$(this).toggleClass("showMenu");

});
横からメニューが出てくる
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: 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>

$("#switch").click( function(){


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


$("#demo2").toggleClass("hideMenu");

$(this).toggleClass("showMenu");

});
横からメニューが出てくる２
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;


}

#demo2 {

height: 500px;

width: 500px;

background-color: orange;

}

#demo2.showMenu {

animation: demo2Animation 0.2s ease-out 0;


}

#demo2.hideMenu {

animation: demo2AnimationHide 0.2s ease-out 0;


}

@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>

What’s the difference?
JavaScriptとの違いは？

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;

}

CSSアニメーションと
JSアニメーションの違い
• 動作ブラウザ
• JSアニメーションはCPUが制御 
CSSアニメーションはCPU、GPU併用
• CSSアニメーションはブラウザに依存する分、最
適化された処理を行ってくれる
• JSに書くか、CSSに書くか

動作ブラウザ
• JavaScript（jQuery）なら、何も怖くない。 
そう、IE6だって。 
でも、変化するスタイルには注意。
• CSS3はイマドキのブラウザ以外は未対応。 
スマホならあんまり気にしなくてもいい。 
IE8∼9は未対応。

transition

animation

2D transform

3D transform

CPU制御/GPU制御
• JavaScriptによるアニメーションは、CPUが直接処理を行
う。
• CSSによるアニメーションは、 
CPUがGPUに命令を出すCPU/GPU併用の処理になる。
• GPUは描画演算が得意だけど、 
CPUから指示をもらわないと働けない。
• 要はCSSアニメーションを使うだけでぬるぬる動かせるわけ
じゃなくて、ちゃんとした使い方をしないとぬるぬる動かない。

どうすればいいのか
• なるべくtransformを使う 
transformは開始と終了の２点の演算になります。
leftとかtopとか数値指定はCPU担当。
• transformだからって.jsで小刻みに処理していたら
意味がないので注意。
• あんまり気にしない。

見た目の処理は CSSにお任せ
• .jsにはデータの処理を任せて、見た目の処理はすべ
てCSSに任せてしまう。
• .jsはせいぜい、classの付け外しぐらいにする。
• .jsのコードが綺麗になって本来すべきデータの処理
に集中することができる。

Is it Necessary?
アニメーションって必要？

–名も無きSE
アニメーションとかバグのリスクが増えるだけ
だからやめて欲しい

–名も無きPL
アニメーションしなくても機能は満たしている
んでしょ？

正直＋αなものです。

どれだけ＋にできるかが
重要です。

アニメーションが効果的な箇所
• タッチ操作ではホバーが効かないのでタッチ時に
• 画面上の要素が変化した時
• 待機中の状態を知らせる場合
• 特に注意を惹きつけたい場合
• 注目させたい要素ではなく、ユーザの次の目的を想
定して注目させる

より良い
ユーザ体験を提供するために
アニメーションしましょう。

Today’s recap
おさらい

今日の内容を１ページに
• CSSのスタイル設定でアニメーションできる機能。
• お手軽にtransitionでアニメーション。
• がっつりanimationでアニメーション。
• CSSアニメーションはGPU併用処理とはいえ万能ではない。
• 動きを設定する場合、transformを使うとぬるぬる。
• アニメーションはより効果的な箇所で使って価値を高める。

Thank you for your kind
attention!!
ご静聴、ありがとうございました。
@kumetter Follow me!!

Hello css animation_public

Recommended

Recommended

More Related Content

Similar to Hello css animation_public

Similar to Hello css animation_public (20)

Recently uploaded

Recently uploaded (9)

Hello css animation_public