2016.8.6に開催されたWordBench新潟で使用したスライドに修正を加えたものです。

1. 2016年8月6日 齊藤 修一
2016年8月6日＿WordBench新潟＿CSS3によるアニメーション表現＿001
CSS3 によるアニメーション表現
WordBench 新潟

2. 2016年8月6日＿WordBench新潟＿CSS3によるアニメーション表現＿002
CSS によるアニメーション
CSS3 より登場した、
アニメーション（動き）を表現する 2 つのプロパティ。

3. 2016年8月6日＿WordBench新潟＿CSS3によるアニメーション表現＿003
CSS によるアニメーション
「 transition 」と「 animation 」
トランジション アニメーション

4. 2016年8月6日＿WordBench新潟＿CSS3によるアニメーション表現＿004
2 つのプロパティの違い
transition
・:hover などをトリガーとして、要素のプロパティの値を変化させる。
・ループなし
animation
・ページ表示後に要素のプロパティの値を変化させる。
・複雑な処理が可能。
・ループあり

5. 2016年8月6日＿WordBench新潟＿CSS3によるアニメーション表現＿005
transition の対応ブラウザ
・IE9 以下が非対応。ただし IE9 のサポートは Windows Vista のみ
2017 年 4 月まで。
IE9 以下に対応する必要がある場合は、
プログレッシブエンハンスメントの考え方を採用するなどの対策をとる
・古い Android Browser 用にベンダープレフィックス（webkit）の設定が必要
http://caniuse.com/#search=transition

6. 2016年8月6日＿WordBench新潟＿CSS3によるアニメーション表現＿006
transition のサンプルコード
.demo_transition {
width: 200px;
height: 150px;
background: #00F;
transition-property: background, width;
transition-duration: 2s;
transition-timing-function: ease-out;
transition-delay: 0;
}
.demo_transition:hover{
width: 300px;
background: #f00;
}

7. 2016年8月6日＿WordBench新潟＿CSS3によるアニメーション表現＿007
transition のサンプルコード
.demo_transition {
width: 200px;
height: 150px;
background: #00F;
transition-property: background, width;
transition-duration: 2s;
transition-timing-function: ease-out;
transition-delay: 0;
}
.demo_transition:hover{
width: 300px;
background: #f00;
}

8. 2016年8月6日＿WordBench新潟＿CSS3によるアニメーション表現＿008
transition のプロパティ
transition-property
・transition 効果を指定するプロパティ
・カンマ区切りで複数指定が可能、all で全体指定
transition-duration
・アニメーションで変化する時間の長さを指定
・カンマ区切りでプロパティごとに指定が可能
transition-timing-function
・変化の仕方を指定
・ease、linear、ease-in、ease-out などさまざまな指定方法がある
transition-delay
・transition 実行までの待ち時間
・0 の場合は即実行

9. 2016年8月6日＿WordBench新潟＿CSS3によるアニメーション表現＿009
transition のサンプルコード（ショートハンド）
transition-property: background, width;
transition-duration: 2s;
transition-timing-function: ease-out;
transition-delay: 0;
↓
transition: background 2s ease-out 0, width 2s ease-out 0;

10. 2016年8月6日＿WordBench新潟＿CSS3によるアニメーション表現＿010
transition のサンプルコード（ショートハンド）
transition: background 2s ease-out 0, width 2s ease-out 0;
・プロパティが複数ある場合は、カンマで区切る
・それぞれ省略が可能。
・transition-property を省略すると全体（all）にかかる。初期値が all のため。
・基本的に順不同だが、transition-duration は transition-delay より先に書く。

11. 2016年8月6日＿WordBench新潟＿CSS3によるアニメーション表現＿011
transition のトリガー
:hover
マウスオンで動作
:active
リンクをクリックしている間などに動作。クリックしたままにする必要がある。
:target
ページ内リンク等で、#test などで指定が入った部分に適用
:focus
input など、focus した際に適用
:checked
チェックボックスやラジオボタンでチェックが入った際に適用

12. 2016年8月6日＿WordBench新潟＿CSS3によるアニメーション表現＿012
transition のトリガー
jQuery
jQuery の toggleClass などを利用して、class を追加・削除することで起動

13. 2016年8月6日＿WordBench新潟＿CSS3によるアニメーション表現＿013
animation の対応ブラウザ
・IE9 以下が非対応。ただし IE9 のサポートは Windows Vista のみ
2017 年 4 月まで。
IE9 以下に対応する必要がある場合は、
プログレッシブエンハンスメントの考え方を採用するなどの対策をとる
・古い Android Browser 用にベンダープレフィックス（webkit）の設定が必要
http://caniuse.com/#search=animation

14. 2016年8月6日＿WordBench新潟＿CSS3によるアニメーション表現＿014
animation のサンプルコード
.demo {
animation-name: demo_animation;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes demo_animation {
from {
width: 200px;
height: 140px;
background: #fff;
}
to {
width: 400px;
height: 220px;
background: #ff0;
}
}

15. 2016年8月6日＿WordBench新潟＿CSS3によるアニメーション表現＿015
animation のサンプルコード
.demo {
animation-name: demo_animation;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes demo_animation {
from {
width: 200px;
height: 140px;
background: #fff;
}
to {
width: 400px;
height: 220px;
background: #ff0;
}
}

16. 2016年8月6日＿WordBench新潟＿CSS3によるアニメーション表現＿016
animation のサンプルコード
.demo {
animation-name: demo_animation;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes demo_animation {
from {
width: 200px;
height: 140px;
background: #fff;
}
to {
width: 400px;
height: 220px;
background: #ff0;
}
}

17. 2016年8月6日＿WordBench新潟＿CSS3によるアニメーション表現＿017
animation のプロパティ
animation-name
・アニメーションの名前を指定
・具体的な動きは @keyframes で指定
animation-duration
・アニメーションが 1 週するのに掛かる時間を設定
animation-iteration-count
・アニメーションを繰り返す回数を指定
・infinite は無限。初期値は 1。 0 の場合は実行しない
animation-timing-function
・変化の仕方を指定
・ease、linear、ease-in、ease-out などさまざまな指定方法がある。

18. 2016年8月6日＿WordBench新潟＿CSS3によるアニメーション表現＿018
animation のプロパティ
animation-delay
・要素が読み込まれてからアニメーションを始めるまでの待ち時間
・初期値は 0 で、その場合は即実行
animation-direction
・アニメーション終了時に、逆方向にアニメーションして繰り返すか、
始めの状態にリセットしてアニメーションを繰り返すかを設定
・値は初期値である normal、逆方向に再生する場合は alternate

19. 2016年8月6日＿WordBench新潟＿CSS3によるアニメーション表現＿019
animation のサンプルコード（ショートハンド）
animation-name: demo_animation;
animation-duration: 3s;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-delay: 0;
↓
animation: demo_animation 3s ease infinite 0;

20. 2016年8月6日＿WordBench新潟＿CSS3によるアニメーション表現＿020
animation のサンプルコード（ショートハンド）
animation: demo_animation 3s ease infinite 0;
・それぞれ省略が可能。
・基本的に順不同だが、animation-duration を animation-delay より先に書く。

21. 2016年8月6日＿WordBench新潟＿CSS3によるアニメーション表現＿021
animation の keyframes
@keyframes demo_animation {
0% {
width: 200px;
height: 100px;
background: #fff;
}
50% {
width: 450px;
height: 250px;
background: #ff0;
}
100% {
width: 100px;
height: 80px;
background: #000;
}
}

22. 2016年8月6日＿WordBench新潟＿CSS3によるアニメーション表現＿022
animation の keyframes
@keyframes demo_animation {
0% {
width: 200px;
height: 100px;
background: #fff;
}
50% {
width: 450px;
height: 250px;
background: #ff0;
}
100% {
width: 100px;
height: 80px;
background: #000;
}
}

23. 2016年8月6日＿WordBench新潟＿CSS3によるアニメーション表現＿023
from(0%)
50%
開始 終了
to(100%)
animation の keyframes

24. 2016年8月6日＿WordBench新潟＿CSS3によるアニメーション表現＿024
animation の keyframes
animation: demo_animation 3s ease infinite 0;
・アニメーションの最初と最後、その途中の各地点での状態を設定。
・最初は from ( もしくは 0%)、最後は to ( もしくは 100%) と記載する。
・最初と最後は必須、ないと動かない。
・途中に 20%、40%、70%・・・など複数増やせる。