過渡和動畫
transition(過渡)
在CSS3引入transition之前css沒有時間軸，所有的狀態變化都是瞬間完成
div{
height:15px;
width:15px;
}
div:hover{
height: 450px;
width: 450px;
}
transition的作用在于，指定狀態變化所需要的時間
transition: 1s;
指定屬性
我們還可以指定transition適用的屬性，比如只適用于height
transition: 1s height;
這樣一來，只有height的變化需要1秒實現，其他變化（主要是width）依然瞬間實現，在同一行transition語句中，可以分別指定多個屬性
transition: 1s height, 1s width;
delay（延時）
我們還可以指定變化的延時開始，比如這個地方我們希望讓height先發生變化，等結束以后，再讓width發生變化， 我們只需要為width指定一個delay參數
transition: 1s height, 1s 1s width;
上面代碼指定，width在1秒之后，再開始變化，也就是延遲（delay）1秒
delay的真正意義在于，它指定了動畫發生的順序，使得多個不同的transition可以連在一起，形成復雜效果
transition-timing-function
transition的狀態變化速度（又稱timing function），默認不是勻速的，而是逐漸放慢，這叫做ease
除了ease以外，其他模式還包括
- linear：勻速
- ease-in：加速
- ease-out：減速
- cubic-bezier函數(貝塞爾函數)
語法
transition: 1s 1s height ease;
這其實是一個簡寫形式，可以單獨定義成各個屬性
transition-property: height;
transition-duration: 1s;
transition-delay: 1s;
transition-timing-function: ease;
注意事項
- 目前，各大瀏覽器（包括IE 10）都已經支持無前綴的transition，所以transition已經可以很安全地不加瀏覽器前綴
- transition需要明確知道，開始狀態和結束狀態的具體數值，才能計算出中間狀態，什么none到block之類的是不行的
- transition是一次性的，不能重復發生，除非一再觸發
事件
transitionend
- transitionend 事件會在 CSS transition 結束后觸發.
- 當transition完成前移除transition時，比如移除css的transition-property 屬性，事件將不會被觸發.如在transition完成前設置 display: none，事件同樣不會被觸發.
- 幾個屬性發生了變化就觸發幾次,比如
div{
transition: height 1s, width 1s;
}
div:hover{
width: 100px;
height: 100px;
}
一次hover會觸發兩次transitionend事件
- 注意不同瀏覽器中的前綴
- webkitTransitionEnd
- mozkitTransitionEnd
animation(動畫)
transition 比較簡單，animation可以幫我們實現復雜的動畫
基本用法
@keyframes change-color{
0% {
background: red;
}
50%{
background: blue;
}
100%{
background: orange;
}
}
div{
height: 100px;
width: 200px;
border: 1px solid #111;
}
div:hover{
animation-name: change-color;
animation-duration: 2s;
}
我們使用keyframes(關鍵幀)來定義一個動畫效果, change-color是我們取得動畫名字，每個百分比后面寫的是相應時間點我關鍵幀樣式，
定義好后，在animation(動畫)屬性中調用，2s 表示的動畫的持續時間
指定播放次數(animation-iteration-count)
默認情況下，動畫只會播放一次， 我們可以指定動畫具體播放的次數，比如3次：
div:hover {
animation-name: change-color;
animation-duration: 2s;
animation-iteration-count: 3;
}
也可以無線循環播放：
div:hover {
animation-name: change-color;
animation-duration: 2s;
animation-iteration-count: infinite;
}
延時(animation-delay)
animation-timing-function
動畫播放前后的狀態(animation-fill-mode)
animation-fill-mode: none | backwards | forwards| both;
- none: 動畫執行前后不改變任何樣式
- forwards: 動畫結束后的目標保持動畫最后一幀的樣式
- backwards: 動畫開始前目標保持動畫第一幀的樣式(必須配合延時才能看到效果, 如果設置為backwards, 延時期間的樣式是動畫第一幀的樣式, 否則延時期間是目標默認樣式)
- both: 同時應用forwards和 backwards
動畫播放的方向(animation-direction)
動畫連續播放時，每次都是從結束狀態跳回到起始狀態，再開始播放。animation-direction屬性，可以改變這種行為
animation-direction可以使用下列值:
- normal: 正常播放, 默認值;
- reverse: 倒著播放
- alternate: 第一次正常播放, 第二倒著播放, .. 這樣交替的循環下去
- alternate-reverse: 第一次倒著播放, 第二次正常播放, .. 這樣交替的循環下去
下圖解釋了它的規律（假定動畫連續播放三次）
簡單說，animation-direction指定了動畫播放的方向，最常用的值是normal和reverse。瀏覽器對其他值的支持情況不佳，應該慎用
語法
div:hover {
animation-name: change-color;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-fill-mode:forwards;
animation-direction: normal;
animation-iteration-count: 3;
}
簡寫
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode;
例子:
div:hover {
animation: 1s 1s change-color linear 3 forwards normal;
}
keyframes關鍵字用來定義動畫的各個狀態，它的寫法相當自由
@keyframes change-color {
0% { background: #c00 }
50% { background: orange }
100% { background: yellowgreen }
}
0%可以用from代表，100%可以用to代表，因此上面的代碼等同于下面的形式
@keyframes change-color {
from { background: #c00 }
50% { background: orange }
to { background: yellowgreen }
}
如果省略某個狀態，瀏覽器會自動推算中間狀態，所以下面都是合法的寫法。
@keyframes change-color {
50% { background: orange }
to { background: yellowgreen }
}
@keyframes change-color {
to { background: yellowgreen }
}
甚至，可以把多個狀態寫在一行。
div:hover {
animation: 1s change-color infinite steps(10);
}
另外一點需要注意的是，瀏覽器從一個狀態向另一個狀態過渡，是平滑過渡。steps函數可以實現分步過渡。
div:hover {
animation: 1s change-color infinite steps(10);
}
animation-play-state
有時，動畫播放過程中，會突然停止。這時，默認行為是跳回到動畫的開始狀態，如果想讓動畫保持突然終止時的狀態，就要使用animation-play-state屬性。
div {
animation: spin 1s linear infinite;
animation-play-state: paused;
}
div:hover {
animation-play-state: running;
}
