transform，transition,animation

transform，transition,animation三者的區別？

1.transform是單獨的形變，偏移，而transition和animation都加上了時間屬性，因此可以產生動畫效果。
2.transition的動畫效果通常由行爲(hover,js等)觸發，而animation則是自動觸發。
3.transition的動畫效果只有兩幀關鍵幀，而animation能夠有更多幀。

transform及其相關屬性

1.translate沿着x軸偏移的最好示例
兩個屬性的順序不一樣，形成的效果也是不一樣

2.如何改變旋轉的中心點左上角？
transform-origin:0 0；（默認起始點是transform-origin:50% 50%;）

3.如何讓y軸旋轉有3D效果?
在父元素上面加上perspective：length;

4.如何改變透視效果？
perspective-origin：

5.如何進行3d的移動和zoom？
transform:translate3d(x,y,z);z軸移動的視覺效果是，近大遠小.前提是父元素有pespective屬性；
transform:scale3d(x,y,z);scaleZ與transformZ同用，能縮放或放大transformZ的比例。

transform:rotate3d(x,y,z,deg)

6.當你想保存一個transform元素的子元素的3d空間能夠怎麼作？
transform-style:preserve-3d;（默認爲flat，使用在具備transform屬性的元素上，做用其子元素。）

7.若是你想要一個transform平面的背面不可見，能夠怎麼作？
backface-visibility:hidden;（默認爲visible,使用並做用於transformable elements）

transition及其相關屬性

1. transition-property: 爲指定的屬性設置動畫效果。(默認爲all，即兩個動做間產生變化的全部屬性都發生做用。示例：transition-property:color;)

2. transition-duration:設置動畫歷時(默認是0s)

3. transition-timing-function:設置動畫方式（默認是ease）

4. transition-delay:設置動畫延時(默認是0s)

5. 簡寫transition:上面四個屬性能夠出現1-4個；

animation及其相關屬性

因爲瀏覽器的兼容性，須要在animation相關屬性前加上前綴-webkit-,-moz-,-o-
1.animation-name:動畫名稱（初始值爲none）
命名規則: 由字母，數字，-，_組成，且必須以字母開頭，區分大小寫。
示例：

div{-webkit-animation-name:abc;}
@-webkit-keyframes abc{
    0%{left:0;top:0;}
    50%{left:250px;top:100px;}
    100%{left:500px;top:0;}
}

附上@keyframes 語法

@keyframes <identifier> {
  [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
}

2.animation-duration:設置動畫時間(初始值0s)
3.animation-timing-function:設置動畫時間函數(初始值ease，表示中間快，兩頭慢)
4.animation-iteration-count:infinite | <number> 設置動畫次數（初始值1）
5.animation-direction：normal | reverse | alternate | alternate-reverse 設置動畫開始的位置(初始值爲normal)
6.animation-play-state:running | paused 設置動畫運行仍是中止（初始值爲running）
7.animation-delay:<time># 設置動畫延時(默認是0s)
8.animation-fill-mode:none | forwards | backwards | both 設置動畫執行先後是否把動畫樣式第一幀和最後一幀設置到動畫元素上面（初始值爲none），一般設置爲both;
9.簡寫animation:上面八個屬性能夠出現1-8個，可設置多個；

常見應用demo

待添加