# 6.動畫 - 1. transition 過渡 transition-property:all;//監聽屬性 transition-duration:1s;//過渡時間 transition-timing-function:linear;//運動速率 transition-delay:1s;// ...
# 6.動畫 - 1. transition 過渡 transition-property:all;//監聽屬性 transition-duration:1s;//過渡時間 transition-timing-function:linear;//運動速率 transition-delay:1s;//過渡延遲時間 ```html <style> div{ width:100px; height:100px; background-color:#008c8c; transition:width 2s linear 1s; } div:hover{ width:200px; height:200px; } </style> <div></div> ``` transition-timing-function:cubic-bezier(x1, y1, x2, y2);//x值必須（0，1） - 2. animation animation-name//名稱 animation-duration//執行時間 animation-timing-function//運動速率 animation-delay//延遲時間 animation-iteration-count:infinite;//執行無限次，預設值為1 animation-direction:reverse;//反向運動，預設值normal animation-play-state:paused;//不推薦使用 animation-fill-mode:none | forwards | backwards | both;//forwards:在動畫運動結束後，保持動畫最後一幀的狀態;backwards:在動畫運動開始前，保持動畫第一幀的狀態;both:在動畫結束胡，保持動畫最後一幀的狀態, 在動畫開始前，保持動畫第一幀的狀態; ```html <style> @keyframes run{ 0%{ left:0; top:0; } 25%{ left:100px; top:0; } 50%{ left:0; top:100px; } 75%{ left:0; top:0; } 100%{ left:0; top:0; } } div{ position:absolute; width:100px; height:100px; background-color:red; animation:run 4s; } </style> ``` - 3. step steps(1, end); === step-end; steps(1, start); === step-start; ```html <style> @keyframes change-color{ 0% { background-color:red; } 25% { background-color:green; } 50% { background-color:blue; } 75% { background-color:black; } 100% { background-color:#fff; } } div{ width:100px; height:100px; background-color:red; animation:change-color 4s steps(1, end);/*steps(幾步執行，) start:保留下一幀狀態，直到這段動畫時間結束 end:保留當前幀狀態，直到這段動畫時間結束 */ } </style> ``` - 4. transform rotate: transform:rotate(0deg);//旋轉度數 taransform-origin:0 0;//旋轉中心點 transform:rotateX(0deg);//圍繞X軸旋轉 transform:rotateY(0deg);//圍繞Y軸旋轉 transform:rotateZ(0deg);//圍繞Z軸旋轉 transform:rotate3d(x,y,z,angle);//圍繞自定義矢量旋轉 scale: 伸縮的是此元素的變化坐標軸的刻度（若x為2，則原來x軸的100被拉伸為200的長度，但是現在100的刻度代表200的長度。就像皮筋一樣上面標上刻度100，被拉長了2倍，但是皮筋上的刻度未變，但現在100刻度代表了200的長度一樣。所以再對x軸進行長度操作如平移100刻度，實際上平移了200的長度） scale(x, y);//x.橫坐標伸縮的倍數;y.縱坐標伸縮的倍數; scalex(); scaley(); scalez(); scale3d(); 可以疊加操作 transform:scale(.5, .5) scale(3, 3);//實際操作倍數0.5*3 skew: 傾斜 transform:skew(xdeg, ydeg) 不僅傾斜了，坐標軸刻度也被拉伸了，因為傾斜過後，元素高度保持不變 傾斜的是坐標軸而不是元素本身，若設置了xdeg那麼y軸角度變化，若設置了ydeg那麼x軸角度發生變化。 xdeg:表示x軸扭曲度 x扭曲 = y旋轉+y伸縮 x取值為正，x軸不動，y軸朝著x軸正方向傾斜x度數 x取值為負，x軸不動，y軸朝著x軸負方向傾斜x度數 ydeg:表示x軸扭曲度 y扭曲 = x旋轉+x伸縮 y取值為正，y軸不動，x軸朝著y軸正方向傾斜x度數 y取值為負，y軸不動，x軸朝著y軸負方向傾斜y度數
translate:平移
transform:translate(xpx,ypx);//平移xpx和ypx
transform:translatex(xpx);
transform:translatey(ypx);
transform:translatez(zpx);
元素居中，不知道元素的寬度：
left:50%;
transform:translatex(-50%);
用於父元素的屬性
perspective:景深(按照投影理解，比較好理解)
取值1到正無窮px，預設值為0
perspective-origin: 300px 200px;//從元素左上角開始計算
用於自身元素的屬性
transform:perspective(800px);
用於父元素屬性
transform-style:preserve-3d;//渲染3d效果
用於自身元素的屬性：
backface-visibility：visible | hidden;//背面元素是否可見
```html
<!-- 3D旋轉圖片牆 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
:root,
body{
height:100%;
}
body{
perspective:2000px;
transform-style:preserve-3d;
}
@keyframes run{
0%{
transform:translate(-50%, -50%) rotatey(0deg);
}
100%{
transform:translate(-50%, -50%) rotatey(360deg);
}
}
.wrapper{
position: absolute;
left:calc(50%);
top:calc(50%);
transform:translate(-50%, -50%);
width:300px;
height:300px;
transform-style:preserve-3d;
animation:run 10s infinite;
}
.image{
position:absolute;
background-color:#fff;
width:300px;
height:300px;
}
.image:nth-of-type(1){
transform:rotatey(45deg) translateZ(800px);
background-image:url(1.jpg);
}
.image:nth-of-type(2){
transform:rotatey(90deg) translateZ(800px);
background-image:url(2.jpg);
}
.image:nth-of-type(3){
transform:rotatey(135deg) translateZ(800px);
background-image:url(3.jpg);
}
.image:nth-of-type(4){
transform:rotatey(180deg) translateZ(800px);
background-image:url(4.jpg);
}
.image:nth-of-type(5){
transform:rotatey(225deg) translateZ(800px);
background-image:url(5.jpg);
}
.image:nth-of-type(6){
transform:rotatey(270deg) translateZ(800px);
background-image:url(6.jpg);
}
.image:nth-of-type(7){
transform:rotatey(315deg) translateZ(800px);
background-image:url(7.jpg);
}
.image:nth-of-type(8){
transform:rotatey(360deg) translateZ(800px);
background-image:url(8.jpg);
}
</style>
</head>
<body>
<div class="wrapper">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
<script>
document.body.onmousemove = function(e){
this.style.perspectiveOrigin = "" + e.pageX + "px " + e.pageY + "px";
}
</script>
</body>
</html>
```
以上是markdown格式的筆記
