<style media="screen">.cp_anime { border-radius: 6px; height: 60px; line-height: 60px; text-align: center; color: #ffffff; cursor: pointer;}.cp_ease { background: #29b6f6; width: 100px; transition: background 1s ease,width 1s ease;}.cp_ease:hover { background: #f06292; width: 200px;}.cp_linear { background: #29b6f6; width: 100px; transition: background 1s linear,width 1s linear;}.cp_linear:hover { background: #f06292; width: 200px;}.cp_ease-in { background: #29b6f6; width: 100px; transition: background 1s ease-in,width 1s ease-in;}.cp_ease-in:hover { background: #f06292; width: 200px;}.cp_ease-out { background: #29b6f6; width: 100px; transition: background 1s ease-out,width 1s ease-out;}.cp_ease-out:hover { background: #f06292; width: 200px;}.cp_ease-in-out { background: #29b6f6; width: 100px; transition: background 1s ease-in-out,width 1s ease-in-out;}.cp_ease-in-out:hover { background: #f06292; width: 200px;}.cp_step-start { background: #29b6f6; width: 100px; transition: background 1s step-start,width 1s step-start;}.cp_step-start:hover { background: #f06292; width: 200px;}.cp_step-end { background: #29b6f6; width: 100px; transition: background 1s step-end,width 1s step-end;}.cp_step-end:hover { background: #f06292; width: 200px;}.cp_steps { background: #29b6f6; width: 100px; transition: background 3s steps(3,end),width 3s steps(3,end);}.cp_steps:hover { background: #f06292; width: 200px;}.cp_cubic-bezier { background: #29b6f6; width: 100px; transition: background 1s cubic-bezier(.17,.89,.32,1.28),width 1s cubic-bezier(.17,.89,.32,1.28);}.cp_cubic-bezier:hover { background: #f06292; width: 200px;}@keyframes cp_anime { 0% { background: #29b6f6; width: 100px;}100% { background: #f06292; width: 200px;}}.cp_normal { width: 100px; background: #29b6f6; -webkit-animation: cp_anime 3s ease infinite normal; animation: cp_anime 3s ease infinite normal;}.cp_reverse { width: 100px; background: #29b6f6; -webkit-animation: cp_anime 3s ease infinite reverse; animation: cp_anime 3s ease infinite reverse;}.cp_alternate { width: 100px; background: #29b6f6; -webkit-animation: cp_anime 3s ease infinite alternate; animation: cp_anime 3s ease infinite alternate;}.cp_alternate-reverse { width: 100px; background: #29b6f6; -webkit-animation: cp_anime 3s ease infinite alternate-reverse; animation: cp_anime 3s ease infinite alternate-reverse;}.cp_pause { line-height: 60px; width: 100px; height: 60px; cursor: pointer; animation: cp_anime 3s ease infinite alternate; text-align: center; color: #ffffff; border-radius: 6px; background: #29b6f6;}.cp_pause:hover { animation-play-state: paused;}</style>animation-name:任意でつける名前
animation-duration:1回分の実行にかける時間
animation-timing-function:実行中の変更速度
animation-iteration-count:繰り返す数
animation-direction:繰り返す際の方向を指定
animation-play-state:実行、および停止を指定
animation-delay:実行やプロパティ変更の際の待ち時間
animation-fill-mode:実行後スタイルを元に戻さず、変化したままのスタイルを維持するか否か
+
@keyframes:animation-nameで指定したものに対して、各アニメーションの進行状況ごとに変化させるプロパティを指定。
*iOS8以下やAndroid4.4.4以下対応時の場合はベンダープレフィックスが必要
<h4>animation-name:任意でつける名前</h4>上記サンプルでは[item_fadein]と指定
どのような動きのanimationを設定しているか（あとから見て）わかりやすいものであればなんでもいいです。
@keyframesで設定したものを実行するために必要な名前となります。
<h4>animation-duration:1回分の実行にかける時間</h4>transitionはtransitionにかける時間
animationの場合は1回分の実行にかける時間
<h4>animation-timing-function:実行中の変更速度(transition-timing-functionプロパティと同じ)</h4>*[:hover]で確認できます。
基本的な動きは、[background:#29b6f6;][width:100px;]のboxを[:hover]キッカケで1秒かけて[background:#f06292;][width:200px;]に変更します。
<table><tr><th>animation-timing-functionプロパティの値</th></tr><tr><td>▼<strong>ease</strong>:cubic-bezier(0.25, 0.1, 0.25, 1.0) と同様（開始と完了を滑らかにする）（初期値）</td></tr><tr><td><div class="cp_anime cp_ease">ease</div>transition: background 1s ease,width 1s ease;</td></tr><tr><td>▼<strong>linear</strong>:cubic-bezier(0.0, 0.0, 1.0, 1.0) と同様（一定）</td></tr><tr><td><div class="cp_anime cp_linear">linear</div>transition: background 1s linear,width 1s linear;</td></tr><tr><td>▼<strong>ease-in</strong>:cubic-bezier(0.42, 0, 1.0, 1.0) と同様（ゆっくり始まる）</td></tr><tr><td><div class="cp_anime cp_ease-in">ease-in</div>transition: background 1s ease-in,width 1s ease-in;</td></tr><tr><td>▼<strong>ease-out</strong>:cubic-bezier(0, 0, 0.58, 1.0) と同様（ゆっくり終わる）</td></tr><tr><td><div class="cp_anime cp_ease-out">ease-out</div>transition: background 1s ease-out,width 1s ease-out;</td></tr><tr><td>▼<strong>ease-in-out</strong>:cubic-bezier(0.42, 0, 0.58, 1.0) と同様（ゆっくり始まってゆっくり終わる）</td></tr><tr><td><div class="cp_anime cp_ease-in-out">ease-in-out</div>transition: background 1s ease-in-out,width 1s ease-in-out;</td></tr><tr><td>▼<strong>step-start</strong>:通常のhoverの動きおよびsteps(1, start)と同様（瞬時に始まって終わる）</td></tr><tr><td><div class="cp_anime cp_step-start">step-start</div>transition: background 1s step-start,width 1s step-start;</td></tr><tr><td>▼<strong>step-end</strong>:steps(1, end)と同様（transition-durationの時間だけ待って実行）</td></tr><tr><td><div class="cp_anime cp_step-end">step-end</div>transition: background 1s step-end,width 1s step-end;</td></tr><tr><td>▼<strong>steps(数値, start or end)</strong>:ステップ数（数値）で等分に区切り実行。ステップ数は正の整数で指定</td></tr><tr><td><div class="cp_anime cp_steps">steps</div>transition: background 3s steps(3,end),width 3s steps(3,end);transition-duration:3s steps(3,end)で設定（3秒間で3ステップで変化）
transition-duration:3sで設定した時のステップタイミング
steps(3,start)の場合:0s,1s,2sのタイミングで変化
steps(3,end)の場合:1s,2s,3sのタイミングで変化</td></tr><tr><td>▼<strong>cubic-bezier(数値, 数値, 数値, 数値)</strong>:3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定</td></tr><tr><td><div class="cp_anime cp_cubic-bezier">cubic-bezier</div>transition: background 1s cubic-bezier(.17,.89,.32,1.28),width 1s cubic-bezier(.17,.89,.32,1.28);
<a href="http://cubic-bezier.com/">http://cubic-bezier.com/</a>での編集が簡単です</td></tr></table>
<h4>animation-iteration-count:繰り返す数</h4>・初期値は[1]
・無限は[infinite]を指定
<h4>animation-direction:繰り返す際の方向を指定</h4>・初期値は[normal]<table><tr><td>▼<strong>normal</strong>:標準の方向</td></tr><tr><td><div class="cp_anime cp_normal">normal</div>サンプルはanimation: cp_anime 3s ease infinite normal;で設定しています</td></tr><tr><td>▼<strong>reverse</strong>:逆順</td></tr><tr><td><div class="cp_anime cp_reverse">reverse</div>サンプルはanimation: cp_anime 3s ease infinite reverse;で設定しています</td></tr><tr><td>▼<strong>alternate</strong>:animation-iteration-count（繰り返し回数）が奇数の場合は標準/偶数の場合は逆順</td></tr><tr><td><div class="cp_anime cp_alternate">alternate</div>サンプルはanimation: cp_anime 3s ease infinite alternate;で設定しています</td></tr><tr><td>▼<strong>alternate-reverse</strong>:animation-iteration-count（繰り返し回数）が奇数の場合は逆順/偶数の場合は標準</td></tr><tr><td><div class="cp_anime cp_alternate-reverse">alternate-reverse</div>サンプルはanimation: cp_anime 3s ease infinite alternate-reverse;で設定しています</td></tr></table>
<h4>animation-play-state:実行、および停止を指定</h4>[:hover]などでanimationを停止するなどの指定ができます。
running:アニメーションを再生中にする（初期値）
paused:アニメーションを一時停止にする
*[:hover]すると停止します。
<style media="screen">.cp_pause { line-height: 60px; width: 100px; height: 60px; cursor: pointer; animation: cp_anime 3s ease infinite alternate; text-align: center; color: #ffffff; border-radius: 6px; background: #29b6f6;}.cp_pause:hover { animation-play-state: paused;}@-webkit-keyframes cp_anime { 0% { background: #29b6f6; width: 100px;}100% { background: #f06292; width: 200px;}}@keyframes cp_anime { 0% { background: #29b6f6; width: 100px;}100% { background: #f06292; width: 200px;}}</style><div class="cp_pause">cp_item</div>こちらはhover値に:hover{animation-play-state: paused;}を設定。
<h4>animation-delay:animation実行の待ち時間を指定</h4>指定した秒数だけ、animation実行を遅らせます。
transition-delay:1sであれば1秒間は実行されない。
<h4>animation-fill-mode:実行後スタイルを元に戻さず、変化したままのスタイルを維持するか否か</h4>・初期値は[none]
・[forwards]:実行の最後のキーフレーム(100%)で設定されたスタイルを保持
ただし[animation-direction]と[animation-iteration-count]の値によって変わります。<table><tr><th>animation-direction</th><th>animation-iteration-count</th><th>最後のキーフレーム</th></tr><tr><td>normal</td><td>偶数または奇数</td><td>100% または to</td></tr><tr><td>reverse</td><td>偶数または奇数</td><td>0% または from</td></tr><tr><td>alternate</td><td>偶数</td><td>0% または from</td></tr><tr><td>alternate</td><td>奇数</td><td>100% または to</td></tr><tr><td>alternate-reverse</td><td>偶数</td><td>100% または to</td></tr><tr><td>alternate-reverse</td><td>奇数</td><td>0% または from</td></tr></table>
・[backwards]:実行の最初のキーフレーム(0%)で設定されたスタイルを保持
ただし[animation-direction]と[animation-iteration-count]の値によって変わります<table><tr><th>animation-direction</th><th>最初の適切なキーフレーム</th></tr><tr><td>normal または alternate</td><td>0% または from</td></tr><tr><td>reverse または alternate-reverse</td><td>100% または to</td></tr></table>
・[both]:実行開始前は開始直後の状態/実行終了後は終了直前の状態
<h4>animation（ショートハンド）:上記8プロパティのショートハンド</h4><span class="pink-line">animation:animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction</span>
transitionと同じで基本的に順不同。ただしanimation-durationはanimation-delayより先に書く。
複数のアニメーションを指定するには、カンマで区切る。
<strong>ex)cp_animeというanimationを3秒かけて[ease]で動かす。無限に繰り返し方向は標準</strong>
<span class="blue-line">animation: cp_anime 3s ease infinite normal;</span>
<strong>ex)cp_anime1というanimationを3秒かけて[ease]で動かす。無限に繰り返し方向は逆順,cp_anime2というanimationを3秒かけて[ease]で動かす。無限に繰り返し方向は標準</strong>
<span class="blue-line">animation: 'cp_anime1' 3s ease infinite reverse,'cp_anime2' 3s ease 1s infinite;</span>
