瀏覽器前綴
CSS3去兼容不同的瀏覽器，針對舊的瀏覽器做兼容，新瀏覽器基本不需要添加前綴。
transition過渡
- transition-property : 規定設置過渡效果的CSS屬性的名稱。
- transition-duration : 規定完成過渡效果需要多少秒或毫秒。
- transition-delay : 定義過渡效果何時開始。 ( 延遲(數值爲正數)，也可以提前(數值爲負數) )
- transition-timing-function : 規定速度效果的速度曲線。
- 速度曲線：
![在這裏插入圖片描述]()
注：不要加到hover上。
eg:
- 速度曲線：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transition過渡</title>
<style>
div {
width: 100px;
height: 100px;
background-color: aqua;
/* 橫向過渡效果 */
/* transition-property: width; */
transition: all;
/* 過渡的時間 */
transition-duration: 1s;
/* 過渡延遲 */
/* transition-delay: 2s; */
/* 過渡曲線 */
transition-timing-function: ease;
/* 複合樣式寫法 */
/* transition: 1s 2s ease; */
}
div:hover {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
transform變形
-
translate : 位移
translateX：
translateY
translateZ ( 3d ) -
scale : 縮放 （值是一個比例值，正常大小就是1，會已當前元素中心點進行縮放）
scaleX
scaleY
scaleZ (3d) -
rotate : 旋轉 （ 旋轉的值，單位是角度 deg ）
rotateX (3d)
rotateY (3d)
rotateZ ( 和rotate是等級關係，那正值按順時針旋轉，負值按逆時針旋轉 ) -
skew : 斜切
skewX : 單位也是角度，正值向左傾斜，負值向右傾斜。
skewY -
transform的注意事項：
- 變形操作不會影響到其他元素。
- 變形操作只能添加給塊元素，但是不能添加給內聯元素。
- 複合寫法，可以同時添加多個變形操作。
執行是有順序的，先執行後面的操作，再執行前面的操作。
translate會受到 rotate、scale、skew的影響 - transform-origin : 基點的位置
x y z(3d)
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transform</title>
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid red;
margin: 100px auto;
}
.box1 {
width: 200px;
height: 200px;
background-color: blue;
/* 變形的時間 */
transition: 2s;
}
.box:hover .box1 {
/* 位移到具體的位置 */
/* transform: translate(100px, 100px); */
/* 向x軸方向位移100px */
/* transform: translateX(100px); */
/* 放大兩倍 */
/* transform: scale(2); */
/* 縮小一半 */
/* transform: scale(0.5); */
/* x軸方向發大兩倍 */
/* transform: scaleX(2); */
/* 旋轉45度角 */
/* transform: rotate(45deg); */
/* 斜切 */
/* transform: skew(45deg); */
/* x軸斜切 */
/* transform: skew(30deg, 0); */
/* x 、y 都斜切*/
transform: skew(30deg, 30deg);
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
animation動畫
- animation-name : 設置動畫的名字 (自定義的)
- animation-duration : 動畫的持續時間
- animation-delay : 動畫的延遲時間
- animation-iteration-count : 動畫的重複次數 ，默認值就是1 ，infinite無限次數
- animation-timing-function : 動畫的運動形式
注：
1. 運動結束後，默認情況下會停留在起始位置。
2. @keyframes : from -> 0% , to -> 100%
-
animation-fill-mode : 規定動畫播放之前或之後，其動畫效果是否可見。
- none (默認值) : 在運動結束之後回到初始位置，在延遲的情況下，讓0%在延遲後生效
- backwards : 在延遲的情況下，讓0%在延遲前生效
- forwards : 在運動結束的之後，停到結束位置
- both : backwards和forwards同時生效
-
animation-direction : 屬性定義是否應該輪流反向播放動畫。
- alternate : 一次正向(0%100%)，一次反向(100%0%)
- reverse : 永遠都是反向 , 從100%~0%
- normal (默認值) : 永遠都是正向 , 從0%~100%
<!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>
.box {
width: 300px;
height: 300px;
border: 1px solid red;
}
.box1 {
width: 100px;
height: 100px;
background-color: blue;
/* 映射 */
animation-name: myBox;
/* 動畫執行時間 */
animation-duration: 4s;
/* 延遲執行 */
animation-delay: 2s;
/* 重複次數 */
/* animation-iteration-count: 3; */
/* 無限循環 */
animation-iteration-count: infinite;
/* 運動形式 */
animation-timing-function: linear;
/* 複合寫法*/
/* animation: 4s 2s infinite linear; */
}
/* @keyframes myBox { */
/* 起點 */
/* from {
transform: translate(0, 0);
} */
/* 終點 */
/* to {
transform: translate(200px, 0);
} */
/* } */
@keyframes myBox {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(200px, 0);
}
50% {
transform: translate(200px, 200px);
}
75% {
transform: translate(0, 200px);
}
100% {
transform: translate(0, 0);
}
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
animate.css
一款強大的預設css3動畫庫。
官網地址：https://daneden.github.io/animate.css/
基本使用：
animated : 基類(基礎的樣式，每個動畫效果都需要加)
infinite : 動畫的無限次數