“看清animation，transform， @keyframes，transition這四個的臉，以后這四個來了就是要做影片了，看好你們的網頁，除了這四個，誰管你們都不好使，”

一.transition（過渡）
- （一）transition的作用
- （二）transition的屬性
二.animation和@keyframes（影片）
- (一)@keyframes
- - 1.影片序列
  - 2.書寫簡例
- (二)animation
- - 1.書寫簡例
  - 2.常用屬性
  - 3.簡寫屬性
- 三.完整影片簡例代碼
三.transform（轉換）
- （一）2D轉換
- - 1.縮放：scale:
  - 2.移動：translate
  - 3.旋轉：rotate
  - 4.設定元素轉換的中心點:transform-origin
  - 5.綜合性寫法
- （二）3D轉換
- - 1.三維坐標系
  - 2.透視：perspective
  - 3.3D呈現:transfrom-style
  - 4.3D位移：translate3d(x,y,z)
  - 5.3D旋轉：rotate3d（x,y,z）

一.transition（過渡）

（一）transition的作用

如果你有一個盒子，他的體內也有個小盒子，現在我們想把滑鼠放上去他就能變大，

<style>
        .father {
            width: 200px;
            height: 200px;
            background-color: pink;
        }        
        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
</style>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

效果如下：
請添加圖片描述
現在我們給他添加滑鼠放上去子盒子變大效果

<style>
        .son:hover {
            width: 160px;
            height: 160px;
        }
</style>

效果如下：
請添加圖片描述
但是這樣是滑鼠放上去立刻變大，一點也不美觀，如果要有個從小變大就好了，此時我們就可以請出第一位大佬————transition

    .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            transition: all 0.6s;
        }

效果就變為：
請添加圖片描述

這就是transition的作用,transition 屬性設定元素當過渡效果

（二）transition的屬性

transition 屬性設定元素當過渡效果，四個簡寫屬性為：
1.transition-property
2.transition-duration
3.transition-timing-function
4.transition-delay
在這里插入圖片描述
其中他的復寫方式：
transition：transition-property transition-duration transition-timing-function transition-delay；

二.animation和@keyframes（影片）

影片基本使用

	先定義影片
		用@Keyframes定義影片（類似定義類選擇器）
	再animation呼叫影片

(一)@keyframes

@keyframes負責定義影片
要創建 CSS3 影片，你需要了解 @keyframes 規則，

@keyframes 規則是創建影片，
@keyframes 規則內指定一個 CSS 樣式和影片將逐步從目前的樣式更改為新的樣式，

1.影片序列

1.0%是影片的開始，100%是影片的結束，這樣的規則就是影片序列
2.在@Keyframes中規定某種css樣式，就能創建由當前樣式逐漸改為新樣式的影片效果
3.影片是使元素從一種樣式逐漸變化為另一個樣式的效果，可以改變任意多個樣式任意多的影片效果
4.請用百分比來規定變化發生的時間，或者使用關鍵詞from和to，等于0%和100%
5.影片序列可以做多個影片的狀態的變化Keyframe關鍵幀,里面的百分比要是整數，是整體時間劃分

2.書寫簡例

        @keyframes move {
            /* 開始狀態 */
            0% {
                transform: translate(0px);
            }
            /* 結束狀態 */
            100% {
                transform: translate(500px, 0);
            }
        }

(二)animation

當在 @keyframes 創建影片，把它系結到一個選擇器，否則影片不會有任何效果，
指定至少這兩個CSS3的影片屬性系結向一個選擇器：
規定影片的名稱
規定影片的時長

1.書寫簡例

 /* 影片名稱 */
 animation-name: move;
 /* 持續時間 */
animation-duration: 10s;
 /* 播放次數 */
 animation-iteration-count: infinite;

2.常用屬性

1.animation 請添加圖片描述
2.animation-timing-function
在這里插入圖片描述

3.簡寫屬性

一.語法：
animation:影片名稱持續時間運動曲線何時開始播放次數是否反方向影片起始或者結束的狀態
二.注意：
1.簡寫屬性里面不包含animation-play-state屬性
2.暫停影片：animation-play-state：puased;經常和滑鼠經過等其他配合使用
3.想要影片走回來而不是直接跳回來：animation-direction:alternate;
4.盒子影片結束后，停在結束位置animation-fill-mode:forward
三.所以上面的簡例可以簡寫為：

 animation: move 10s infinite;

三.完整影片簡例代碼

    <div></div>

        @keyframes move {
            /* 開始狀態 */
            0% {
                transform: translate(0px);
            }
            /* 結束狀態 */
            100% {
                transform: translate(500px, 0);
            }
        }
        
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 影片名稱 */
            animation-name: move;
            /* 持續時間 */
            animation-duration: 10s;
            /* 播放次數 */
            animation-iteration-count: infinite;
        }

效果如下：
請添加圖片描述

三.transform（轉換）

轉換（transform）是CSS3中具有顛覆性的特征之一，可以實作元素的位移、旋轉、變形、縮放

（一）2D轉換

1.縮放：scale:

縮放，顧名思義，可以放大和縮小，只要給元素添加上了這個屬性就能控制它放大還是縮小，

1.語法：
transform:scale(x,y);
2.總結：
寬和高都放大一倍，相對于沒有放大
transform:scale(2,2) ：寬和高都放大了2倍
transform:scale(2) ：只寫一個引數，第二個引數則和第一個引數一樣，相當于 scale(2,2)
transform:scale(0.5,0.5)：縮小

2.移動：translate

2D移動是2D轉換里面的一種功能，可以改變元素在頁面中的位置，類似定位，

1.語法：
transform: translate(x,y);
2.總結：
定義 2D 轉換，沿著 X 和 Y 軸移動元素
translate中的百分比單位是相對于自身元素的 translate:(50%,50%);
translate類似定位，不會影響到其他元素的位置
對行內標簽沒有效果

3.旋轉：rotate

2D旋轉指的是讓元素在2維平面內順時針旋轉或者逆時針旋轉，

1.語法：
transform:rotate(angle)
2.總結：
角度為正時，順時針，負時，為逆時針
默認旋轉的中心點是元素的中心點

4.設定元素轉換的中心點:transform-origin

1.語法:transform-origin:x y;
2.注意
注意后面的引數x和y是空格隔開
xy默認轉換的中心點是元素的中心點（50% 50%）
還可以給x y設定像素或者方位名稱（top bottom left right center）

5.綜合性寫法

1.語法：transform:translate() rotate() scale()…

2.注意：
其順序會影響轉換的效果，先旋轉會改變坐標軸方向
當我們同時有位移和其他屬性等等時候，記得要將位移放在最前面
一個元素可以添加多個影片，逗號分割

（二）3D轉換

1.三維坐標系

三維坐標系其實就是指立體空間,立體空間是由3個軸共同組成的，

請添加圖片描述

2.透視：perspective

1.在2d平面產生近大遠小的視覺立體，但是只是效果二維的
2.如果想要在網頁產生3D效果需要透視（理解為3D物體投影在2D平面上）
3.透視我們也稱為視距，視距就是人的眼睛到視頻的距離
4.距離視覺點越近在電腦平面成像越大，越遠成像越小
5.透視的單位是像素
6.透視寫在被觀察元素的父盒子上面的

3.3D呈現:transfrom-style

控制子元素是否開啟三維立體空間
代碼給父級，但是影響的是子盒子

屬性：
在這里插入圖片描述

4.3D位移：translate3d(x,y,z)

1.語法：

transform:translateX(…px)
transform:translateY(…px)
transform:translateZ(…px)
transform:translate3d(x,y,z)其中x,y,z分別指要移動的軸的方向的距離
復寫：transform：translateX（） translateY（） translateZ（）

5.3D旋轉：rotate3d（x,y,z）

可以讓元素在三維平面沿著x軸，y軸，z軸或者自定義軸進行旋轉

語法：
transform:rotateX(45deg)沿著x軸進行旋轉
transform:rotateY(45deg)沿著y軸進行旋轉
transform:rotateZ(45deg)沿著y軸進行旋轉
transform:rotate3d(x,y,z,45deg)沿著自定義軸旋轉deg角度

其中transform:rotateX(45deg)沿著x軸進行旋轉方向判斷參考左手手準則
在這里插入圖片描述
transform:rotateY(45deg)沿著y軸進行旋轉判斷參考左手手準則
此時大拇指的方向改為指向下，即y軸正方向

對影片的總結簡單的就寫到這里，希望對各位看客有用，喜歡的話一鍵三連，滑鼠動一動，每天有進步，