css:transform,transition,animation總結

1. transform 2d

名稱	說明
transform	變形功能
transform-orign	指定變換起點

1.1 transform的屬性值

名稱	說明	參數
translate/translateX/translateY	平移	長度值或百分數
scale/scaleX/scaleY	縮放	數值
rotate	旋轉	角度
skew	傾斜	角度
matrix	矩陣	略

例子：

transform: translateX(100px);
 transform: translateX(50%);

 transform: scale(2);
 transform: scale(0.5);

 transform: rotate(45deg);順時針

 transform: skew(45deg,45deg);// 水平方向(0-90有意義) 豎直方向(0-90有意義)

附skew資料：CSS3 transform matrix矩陣與拉伸實例頁面

多重效果並行：只是效果，沒有過程，不存在線行：

transform: scale(0.5) rotate(45deg);

1.2 transform-orign

默認是中心點。能夠設其餘值。第一個參數是x軸，其值能夠是left,center,right,也能夠是百分數。第二個參數是y軸，其值能夠是top,center,bottom，也能夠使百分數。

例子：

transform-origin: 0 0;
transform-origin: left top;
transform-origin: 50% 50%;

2. transform 3d

名稱	說明
transform-style	展示樣式(flat/perserve3d)
perspective	指定變換起點

2.1 transform

3d就是多了一個z軸。transfrom的屬性值比2d多如下：

名稱	說明	參數
translate3d(x,y,z)/translateZ(z)	平移	長度值或百分數
scale3d(x,y,z)/scaleZ(z)	縮放	數值
rotateX(x)/rotate(y)/rotateZ(z)	旋轉	角度
matrix3d	矩陣	略

2.2 transform-style

指定嵌套元素如何在3d空間呈現。

名稱	說明
flat	2d屏幕
preserve-3d	3d屏幕

2.3 perspective

指眼睛距離3d元素的距離。

名稱	說明
none	默認值，表示無限的角度來看 3D 物體，但看上去是平的
長度值	接受一個長度單位大於0的值，其單位不能爲百分比。值越大，角度出現的越遠，就比如你人離遠一點看物體。值越小，正相反。

2.4 perspective-origin

變型基點，同transform-origin

例子：

p{
    width: 200px;
    height: 200px;
    background-color: gray;
}
p.b{
    transform: translate3d(100px,100px,-200px);
}
div{
    perspective: 1000px;
    transform-style: preserve-3d;
}
<div>
    <p class="b"></p>
</div>

3. transition

過渡效果通常是經過一些簡單的 CSS 動做觸發平滑過渡功能，好比： :hover、 :focus、
:active、:checked 等。CSS3 提供了 transition 屬性來實現這個過渡功能，主要屬性如
下表：

名稱	說明	參數
transition-property	指定CSS 屬性	none,all,指定屬性
transition-duration	所需時間	1s,2s
transition-timing-function	過程函數	ease,linear,ease-in,ease-out,ease-in-out
transition-delay	延時	1s,2s
transition	以上四種簡寫

沒有過渡效果的例子：

div{
    width: 200px;
    height: 200px;
    background-color: maroon;
    color: gray;
}
div:hover{
    background-color: green;
    color: white;
}

<div><h1>hello world</h1></div>

加上過分效果：

div{
    width: 200px;
    height: 200px;
    background-color: maroon;
    color: gray;

    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease;
}

簡寫形式：

transition: all 2s ease;

名稱	說明
linear	元素樣式從初始狀態過渡到終止狀態速度是恆速。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
ease	默認值，元素樣式從初始狀態過渡到終止狀態時速度由快到慢，逐漸變慢。等同於貝塞爾曲線(0.25, 0.1,0.25, 1.0)
ease-in	元素樣式從初始狀態過渡到終止狀態時，速度愈來愈快，呈一種加速狀態。等同於貝塞爾曲線(0.42, 0,1.0, 1.0)
ease-out	元素樣式從初始狀態過渡到終止狀態時，速度愈來愈慢，呈一種減速狀態。等同於貝塞爾曲線(0, 0, 0.58,1.0)
linear	元素樣式從初始狀態過渡到終止狀態速度是恆速。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
ease-in-out	元素樣式從初始狀態過渡到終止狀態時，先加速，再減速。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)

4. animation

CSS3 提供了相似 Flash 關鍵幀控制的動畫效果，經過 animation屬性實現。那麼以前的 transition屬性只能經過指定屬性的初始狀態和結束狀態來實現動畫效果，有必定的侷限性。

animation 實現動畫效果主要由兩個部分組成：

1.經過相似 Flash 動畫中的關鍵幀聲明一個動畫；
2.在 animation 屬性中調用關鍵幀聲明的動畫。

名稱	說明
animation-name	用來指定一個關鍵幀動畫的名稱，這個動畫名必須對應一個@keyframes規則。CSS 加載時會應用 animation-name 指定的動畫，從而執行動畫。
animation-duration	用來設置動畫播放所需的時間
animation-timing-function	用來設置動畫的播放方式
animation-delay	用來指定動畫的延遲時間
animation-iteration-count	用來指定動畫播放的循環次數
animation-direction	用來指定動畫的播放方向
animation-play-state	用來控制動畫的播放狀態
animation-fill-mode	用來設置動畫的時間外屬性
animation	以上的簡寫形式

代碼：

@keyframes anim {
    0%,100% {
        background-color: maroon;
        color: gray;
    }
    50% {
        background-color: black;
        color: white;
    }
}
div{
    width: 200px;
    height: 200px;
    background-color: maroon;
    color: gray;
}
div:hover{
    animation-name: anim;
    animation-duration: 5s;
}

<div><h1>hello world</h1></div>

或者：

@keyframes anim {
    from {
        background-color: maroon;
        color: gray;
    }
    to {
        background-color: black;
        color: white;
    }
}

簡寫：

animation: anim 5s ease;