CSS3のアニメーションについて勉強してみた


##CSS3アニメーションの種類
* [transition](http://www.w3.org/TR/css3-transitions/)   
キーフレームなし（2点の値のアニメーション）
* [animation](http://www.w3.org/TR/css3-animations/)   
キーフレームあり（n点の値のアニメーション）

##transitionのプロパティと初期値

| プロパティ | 説明 | 初期値 | 値 |
|:---|:---|:---|:---|
| transition-property | 効果を適用するCSSプロパティを指定 | all | all, none, プロパティ名（カンマ区切りで複数指定） |
| transition-duration | 変化にかかる時間を指定 | 0 | 時間（1秒 = 1s = 1000ms） |
| transition-timing-function | 変化のタイミング・進行割合を指定 | ease | ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end, [cubic-bezier](http://cubic-bezier.com) |
| transition-delay | 変化がいつ始まるかを指定 | 0 | （1秒 = 1s = 1000ms） |
| transition | 上記のプロパティをまとめて指定 | 各プロパティ参照 | 各プロパティ参照 |

##animationのプロパティと初期値

| プロパティ | 説明 | 初期値 | 値 |
|:---|:---|:---|:---|
| animation-name | アニメーション名を指定 | none | none, アニメーション名（カンマ区切りで複数指定） |
| animation-duration | アニメーション一回分の時間の長さを指定 | 0 | 時間（1秒 = 1s = 1000ms） |
| animation-timing-function | アニメーションのタイミング・進行割合を指定 | ease | ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end, [cubic-bezier](http://cubic-bezier.com) |
| animation-delay | アニメーションがいつ始まるかを指定 | 0 | 時間（1秒 = 1s = 1000ms） |
| animation-iteration-count | アニメーションの繰り返し回数を指定 | 1 | infinite（無限に繰り返す）, 数値 |
| animation-direction | アニメーションを交互に反転再生させるかどうかを指定 | normal | normal（普通方向の再生を繰り返す）, alternate（奇数回では普通方向、偶数回では逆方向の再生を繰り返す） |
| animation-play-state | 再生中か一時停止かを指定 | running | running（再生中にする）, paused（一時停止にする） |
| animation-fill-mode | アニメーション実行後にどのようなスタイルを適用するか指定 | none | none, forwards, backwards, both |
| animation | 上記のプロパティをまとめて指定 | 各プロパティ参照 | 各プロパティ参照 |

##ベンダープレフィックス
それぞれ、プロパティの前に以下のベンダープレフィックスを記載

* -moz-
* -webkit-
* -o-
* -ms-


[ベンダープレフィックスとは？](http://www.htmq.com/csskihon/603.shtml)

##使えそうなCSSセレクタ
| セレクタ | 説明 |
|:--|:--|
| :hover | オンマウス時 |
| :active | クリックされてから離れるまで |
| :focus | フォーカスされた時 |

##使用例
###簡単なアニメーション

```html
<div class="animation"></div>
```

```css
.animation {
  background-color: pink;
  height: 200px;
  left: 50%;
  margin: -100px 0 0 -100px;
  position: absolute;
  top: 50%;
  width: 200px;
  transition: background-color 100ms ease 0 , width .1s ease 0 , height .1s ease 0, margin .1s ease 0;
  -moz-transition: background-color 100ms ease 0 , width .1s ease 0 , height .1s ease 0, margin .1s ease 0;
  -webkit-transition: background-color 100ms ease 0 , width .1s ease 0 , height .1s ease 0, margin .1s ease 0;
  -o-transition: background-color 100ms ease 0 , width .1s ease 0 , height .1s ease 0, margin .1s ease 0;
  -ms-transition: background-color 100ms ease 0 , width .1s ease 0 , height .1s ease 0, margin .1s ease 0;
}
.animation:hover {
  background-color: lightgreen;
  height: 100px;
  margin: -50px 0 0 -50px;
  width: 100px;
}
```

[サンプル](http://jsdo.it/masamitsu-konya/v7e8)

###ホバーポップ01（display:none;してないのでただ隠れてるだけ）

```html
<span class="trigger">ホバーするとポップが開く</span>
<div class="pop">
  開きましたよ。
</div>
```

```css
.trigger {
  background-color: pink;
}
.pop {
  background-color: black;
  color: white;
  opacity: 0;
  transition: opacity .5s ease 0;
  -moz-transition: opacity .5s ease 0;
  -webkit-transition: opacity .5s ease 0;
  -o-transition: opacity .5s ease 0;
  -ms-transition: opacity .5s ease 0;
}
.trigger:hover + .pop {
  opacity: .8;
}
.pop:hover {
  cursor: pointer;
}
```
[サンプル](http://jsdo.it/masamitsu-konya/gJ3v)

###ホバーポップ02（完成版）
htmlはホバーポップ01と同じ。

```css
.trigger {
  background-color: pink;
}
.pop {
  background-color: black;
  color: white;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity .2s ease 0, height .2s ease 0;
  -moz-transition: opacity .2s ease 0, height .2s ease 0;
  -webkit-transition: opacity .2s ease 0, height .2s ease 0;
  -o-transition: opacity .2s ease 0, height .2s ease 0;
  -ms-transition: opacity .2s ease 0, height .2s ease 0;
}
.trigger:hover + .pop, .pop:hover {
  height: 200px;
  opacity: .8;
}
```

[サンプル](http://jsdo.it/masamitsu-konya/qJyq)

##ホバーポップ02を元にグローバルメニューを作ってみる

```html
<nav>
  <ul class="globalmenu">
    <li>ページ1</li>
    <li class="submenu">
      ページ2
      <ul>
        <li>サブページ1</li>    
        <li>サブページ2</li>    
        <li>サブページ3</li>    
      </ul>
    </li>
    <li>ページ3</li>
  </ul>
</nav>
```

```css
ul, li {
  margin: 0;
  padding: 0;
}
.globalmenu li {
  background-color: pink;
  float: left;
  height: 20px;
  list-style: none;
  margin: 0 20px 0 0;
  padding: 5px 10px;
  width: 100px;
}
.submenu ul {
  height: 0;
  margin: 0 0 0 -10px;
  opacity: 0;
  overflow: hidden;
  transition: opacity .2s ease 0, height .2s ease 0;
  -moz-transition: opacity .2s ease 0, height .2s ease 0;
  -webkit-transition: opacity .2s ease 0, height .2s ease 0;
  -o-transition: opacity .2s ease 0, height .2s ease 0;
  -ms-transition: opacity .2s ease 0, height .2s ease 0;
  width: 120px;
}
.submenu:hover ul, .submenu ul:hover {
  height: 90px;
  opacity: 1;
}
```

[サンプル](http://jsdo.it/masamitsu-konya/v2FT)


animationについてもやろうと思ったんだけど、
ちょっとボリューミーなので次回にします。