目錄
1 使用Demo
1.1 transform
HTML
<div id="div">正</div>
CSS
#div {
margin: 300px;
width: 200px;
height: 100px;
background: red;
}
#div:hover {
/*transform: rotate(-90deg);*/
/*transform: skew(30deg, 0deg);*/
/*transform: scale(2);*/
/*transform: translate(20px, 0);*/
}
1.2 transform3D
HTML
<div id="box">
<div id="div">正</div>
</div>
CSS
#box {
width: 200px;
height: 200px;
padding: 100px;
background-color: pink;
perspective: 200px; // 父元素必須添加這個屬性，纔有近大遠小的效果
}
#div {
transition: 3s;
width: 200px;
height: 200px;
background: aqua;
font: 140px/200px "宋體";
color: #fff;
text-align: center;
}
#box:hover #div {
transform: rotateX(360deg);
}
1.3 transition
HTML
<div id="box"></div>
CSS
#box {
width: 100px;
height: 100px;
background: red;
transition: 1s width, 1s 2s height, 1s background;
}
#box:hover {
width: 200px;
height: 200px;
background: blue;
}
1.4 animation
HTML
<div id="box"></div>
CSS
#box {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background: red;
animation: move 4s linear infinite alternate;
}
@keyframes move {
25% {
left: 400px;
top: 0;
}
50% {
left: 400px;
top: 400px;
}
75% {
left: 0;
top: 400px;
}
}
2 適用場景
transform：圖片 / 元素，靜態變化（旋轉，縮放，傾斜或平移）
transition：簡單動畫
animation：複雜動畫
3 詳細參數
3.1 transform
作用：讓圖片 / 元素旋轉，縮放，傾斜或平移
參數：
-
transform
- rotate(30deg) 旋轉30度
- skew() | skewX() | skewY() 斜切
- scale() | scaleX() | scaleY() 縮放
- translate() | translateX() | translateY() 位移
-
transform-origin 元素變換的基點（默認圍繞中心點變換）
事件：無
注意：
- 寫在後面的元素先計算
transform: scale(.5) translateX(200px);// 先移動200px，後縮放
- 旋轉，縮放，斜切 都是圍繞着元素的中心點進行變換
3.2 transform3D
作用：產生3D的視覺變換效果
參數：
- perspective 景深（我們的視角與元素之間的距離）必須設置纔有3D效果
- transform
- rotate3d() | rotateX() | rotateY() | rotateZ() 圍繞軸旋轉
- scale3d() | scaleX() | scaleY() | scaleZ() 縮放
- translate3d() | translateX() | translateY() | translateZ() 移動
- transform-style: preserve-3d; 元素進行3d變化時，保留子元素3d變換
- transform-origin: center center 0; 旋轉中心點
- perspective-origin: center center; 景深基點
- backface-visibility: hidden; 隱藏背面：加給 3d 每一個面
事件：無
注意：
- 3D變化必備三要素：
perspective、transform-style、transform
3.3 transition
作用：給元素添加一個過渡動畫
參數：
- transition-delay 延遲時間，動畫延遲多長時間執行(s|ms) 默認值0s
- transition-duration 動畫時長，動畫用多長時間完成(s|ms) 默認值 0s
- transition-property 要動畫的樣式 默認值 all
- transition-timing-function 動畫形式
- linear 勻速
- ease 緩衝(默認值)
- ease-in 加速
- ease-out 減速
- ease-in-out 先加速再減速
- cubic-bezier() 貝塞爾曲線
事件：
// 只能通過事件監聽添加
box.addEventListener('transitionend',function(){
console.log("動畫執行了");
});
// 兼容低版本WebKit瀏覽器
box.addEventListener('WebKitTransitionEnd',function(){
console.log("動畫執行了");
});
注意：
若transition作用的元素，還未渲染完成，transition不起作用
3.4 animation
作用：能實現比transition更復雜的動畫
參數：
- animation-name 動畫幀名稱
- animation-duration 動畫持續時間
- animation-timing-function 動畫形式(參考 transition)
- animation-delay 動畫開始前的延遲時間
- animation-iteration-count 動畫執行次數 number | infinite(無限次)
- animation-direction 偶數次動畫執行過程 alternate(倒序執行) | normal(順序執行)
- animation-fill-mode 設置動畫
開始 / 結束時的樣式 backwards | forwards | both - animation-play-state 動畫
開始 / 暫停paused(暫停) | running(播放)
事件：
var box = document.querySelector("#box");
// 開始
box.addEventListener("animationstart",function(){
console.log("動畫開始");
});
// 結束
box.addEventListener("animationend",function(){
console.log("動畫結束");
});
// 多次執行
box.addEventListener("animationiteration",function(){
console.log("動畫又開始");
});
注意：
若不設置animation-fill-mode，則動畫執行完後默認回到計算後樣式（CSS設置的最初樣式）
