CSS 小結筆記之變形、過渡與動畫
阿新 • • 發佈：2018-12-10
- transition-delay 延遲時間，單位為s或ms
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</titleView Code> <style> div { width: 100px; height: 200px; background-color: aqua; transition: width 2s ease-in-out 0.5s; } div:hover { width: 500px; } </style> </head> <body> <div></div> </body> </html>
結果如下，當滑鼠上上去後變化不再是瞬間完成，而是過渡完成。
2、變形 transform
(1)、2D變形
（a）移動 translate(x,y)
移動可以指定畫素值也可以指定百分比，注意：指定百分比是自身大小的百分比，因此可以用於設定盒子定位置的居中對齊（在設定left：50%後再移動自身的-50%即可）。
<!DOCTYPE html> <html lang="en"> <head> <meta charsetView Code="UTF-8"> <meta name="viewport" content="width=, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: aqua; transition: all 2s; } div:active { transform: translate(200px, 200px); } </style> </head> <body> <div></div> </body> </html>
點選之後盒子進行了移動。用於讓定位的盒子居中的程式碼入下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .fa { width: 300px; height: 300px; background-color: aqua; transition: all 0.5s; position: relative; } .son { background-color: red; position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; transform: translate(-50%, -50%); } </style> </head> <body> <div class="fa"> <div class="son"></div> </div> </body> </html>View Code
結果為
（b）縮放 scale（x，y）
x,y設定大於1 是放大，小於1 是縮小。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: aqua; margin: 200px auto; transition: all 2s; } div:hover { transform: scale(0.5, 2); } </style> </head> <body> <div> </div> </body> </html>View Code
（c）旋轉
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 200px; height: 100px; background-color: aqua; margin: 200px auto; transition: all 2s; transform-origin: bottom left; } div:hover { transform: rotate(120deg); } </style> </head> <body> <div></div> </body> </html>View Code
（d）傾斜 skew（x deg ,y deg）
x,y分別指定傾斜在x，y方向上的角度，可以為負數。y值不寫預設為0。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: aqua; border: 1px solid red; transition: all 1s; margin: 200px auto; } div:hover { transform: skew(30deg, 20deg); } </style> </head> <body> <div></div> </body> </html>View Code
（2）3D變形
（a）旋轉（rotateX,rotateY,rotateZ）
3D旋轉與2D類似，只不過一個是基於二位座標一個是基於三維座標。三個值可以同時指定也可以單獨指定。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 200px; height: 100px; background-color: aqua; margin: 200px auto; transition: all 2s; transform-origin: bottom left; } div:hover { transform: rotateX(120deg); /* transform: rotateY(120deg); */ /* transform: rotateZ(120deg); */ } </style> </head> <body> <div></div> </body> </html>View Code
（b）移動（translateX，translateY，translateZ）
3D移動對於xy方向上的移動與2d移動一致。只有z方向上的移動不一樣。Z方向上的移動在現實生活中是距離變遠，距離變近。因此在網頁中顯示結果是變近則變大，變遠則變小。
要使Z放線上移動生肖首先要設定perspective（眼睛距離螢幕的距離）;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { perspective: 1000px; /* 數值越小說明眼睛離的越近 */ } div { width: 200px; height: 200px; background-color: aqua; transition: all 0.5s; margin: 200px auto; } div:hover { transform: translate3d(0, 0, 200px); } </style> </head> <body> <div> </div> </body> </html>View Code
3、動畫 animation
（1）、animation: animation-name ||animation-duration|| animation-timing-function ||animation-delay ||animation-iteration-count|| animation-direction|| animation-fill-mode; animation-name:動畫名稱（自己使用@keyframes 定義的動畫） animation-duration：持續時間 animation-timing-function：運動曲線，與過渡的運動曲線類似。 animation-delay：延遲時間 animation-iteration-count：迴圈次數 （infinite 是無限迴圈） animation-direction ：是否反向（動畫是否是由結尾倒開是倒著放的） animation-fill-mode：設定在動畫播放之外的狀態（結束時的狀態）none | forwards（設為結束時的狀態）| backwards(設為開始時的狀態)|both（設為開始或結束時的狀態） animation-play-state：設定動畫狀態 running 開始|paused 暫停 （2）、@keyframes 自定義動畫 格式如下@keyframes 動畫名稱 { from{ 開始} 0% to{ 結束 } 100% }
可以用 from...to 來指定動畫過程，也可以用0%~100%指定動畫過程。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: aqua; /* animation: 動畫名稱 動畫時間 運動曲線 何時開始 播放次數 是否反方向 */ animation: move 5s linear 3; } @keyframes move { 0% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(400px, 0, 0); } 50% { transform: translate3d(400px, 300px, 0); } 75% { transform: translate3d(0, 300px, 0); } 100% { transform: translate3d(0, 0, 0); } } </style> </head> <body> <div></div> </body> </html>View Code
