css transition & animation

transition

サポート:IE 10+

img{
    transition: 1s 1s height ease;
}

transition-property:属性transition-duration:持続時間transition-delay:遅延transition-timing-function:変化関数
　　　　　　　　　　- linear cubic-bezier(0,0,1,1)　　　　　　　　　　- ease cubic-bezier(0.25,0.1,0.25,1)　　　　　　　　　　- ease-in cubic-bezier(0.42,0,1,1)　　　　　　　　　　- ease-out cubic-bezier(0,0,0.58,1)　　　　　　　　　　- ease-in-out cubic-bezier(0.42,0,0.58,1)　　　　　　　　　　- cubic-bezier(n,n,n,n)カスタムベッセル関数
無効なプロパティ:display,background:url(foo.jpg)
イベントを繰り返しトリガしない限り、繰り返し実行できません.

animation

サポート:IE 10+

div:hover {
  animation: 1s 1s rainbow linear 3 forwards normal;
}
@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

animation-name:keyframesに対応する名前animation-duration:持続時間animation-timing-function:変化関数
　　　　　　　　　　- linear cubic-bezier(0,0,1,1)　　　　　　　　　　- ease cubic-bezier(0.25,0.1,0.25,1)　　　　　　　　　　- ease-in cubic-bezier(0.42,0,1,1)　　　　　　　　　　- ease-out cubic-bezier(0,0,0.58,1)　　　　　　　　　　- ease-in-out cubic-bezier(0.42,0,0.58,1)　　　　　　　　　　- cubic-bezier(n,n,n,n)カスタムベッセル関数
-step関数
-歩幅:0より大きい整数
-整列:step関数が左整列連続関数か右整列連続関数かを指定します.
start:整列が開始し、最初のフレームはアニメーションの開始時に発生し、end:整列が終了し、最後のフレームはアニメーションの終了時に発生します.を選択します.
step関数の例:http://dabblet.com/gist/1745856

div:hover {
  animation: 1s rainbow infinite steps(10);
}

animation-delay:遅延animation-iteration-count:実行回数animation-fill-mode:充填モード.1回のアニメーションの再生が完了した後、開始状態に戻るか終了状態にとどまるかを決定します.
-noneは最初の状態に戻ります-forwardsはアニメーションが終了した後、要素が現在のアニメーションが終了したときの状態を表します.keyframeの「to」または「100%」フレームに対応します.-backwardsは、アニメーションが開始される前にkeyframeが「from」または「0%」キーの状態にあることを示します.　　　　　　　　　　- both
animation-direction:実行方向
-normal 0->1、0->1、0->1正常再生-alternate 0->1、1->0、0->1正常再生、逆再生-reverse 1->0、1->0、1->0逆再生-alternate-reverse 1->0、0->1、1->0逆再生、正常再生
animation-play-state:再生状態、jsで制御可能
-pausedアニメーション一時停止-runningアニメーション再生中
 
keyframesではfrom=0%,to=100%