一、元素動效
1.過渡 - transition
過渡為一個元素在不同狀態之間切換不同的過渡效果，由過渡屬性的名稱、過渡需要的時間、過渡的方式、過渡的延遲時間四部分組成，注意過渡必須是在元素狀態切換下進行，需要用到偽類，
（1）過渡屬性的名稱 - transition-property 過渡樣式
div {
transition-property: background-color;
}值需要直接寫需要過渡的屬性名稱，當過渡多個樣式的時候可以寫 all，
（2）過渡需要的時間 - transition-duration
div {
transition-duration: 0.5s;
}（3）過渡的方式 - transition-timing-function，CSS中封裝了5種方式：
| ease; | 默認值，先慢再快最后慢 |
| ease-in; | 先慢，后越來越快 |
| ease-in-out; | 速度在開始和結束時都很慢,中間不加速 |
| ease-out; | 先快，后越來越慢 |
| linear; | 勻速 |
div {
transition-timing-function: linear;
}（4）過渡的延遲時間 - transition-delay
延遲時間指在過渡效果開始作用之前需要等待的時間，以s或ms為單位，取值為正會延遲一段時間來回應過渡效果；取值為負會導致過渡立即開始，
div {
transition-delay: 1s;
}（5）簡化寫法，格式：transition：過渡時間 延遲時間 過渡方式 過渡樣式，
div {
transition: 1s 1s ease background-color;
}注意：延遲時間必須寫在過渡時間以后，其他可以調換位置；最簡寫法為 transition:過渡時間；
（6）多重樣式過渡，使用transition進行多個不同的過渡樣式時，每一個不同時間的過渡樣式用逗號分隔，
div {
transition: 1s border-radius, 1s 1s opacity;
}2.變化
（1）translate( ) 位移函式
| transform: translateX(x); | 沿X軸方向平移，正值右移，負值左移 |
| transform: translateY(y); | 沿Y軸方向平移，正值下移，負值上移 |
| transform: translate(x, y); | 沿X軸和Y軸同時平移 |
使用margin負值方法的元素居中必須知道子元素的寬高，而位移函式不用：
.zi {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}（2）rotate( ) 旋轉函式，該函式默認為Z軸旋轉，deg單位為旋轉角度，角度可以為正值或負值，旋轉的中心點是元素最中心的點，
div {
transform: rotateZ(360deg);
}（3）scale( ) 縮放函式，縮放函式中的引數是以倍數為基礎的，1代表當前大小，
| 1 | 代表當前大小 |
| >1 | 代表放大的倍數 |
| <1 | 代表縮小的倍數 |
| 0 | 代表消失 |
| 負值 | 代表鏡面翻轉，后面的數字仍然生效 |
也可以寫兩個值，如果寫一個表示x軸和y軸用同一個值，
div {
transform: scale(-1, -1);
}（4）skew( ) 傾斜扭曲函式，在2d變換中傾斜，可以有X軸和Y軸的傾斜角度，默認為X軸傾斜，
| skewX | x軸扭曲，正值水平左側扭曲，負值右側扭曲 |
| skewY | y軸扭曲，正值左側向上，負值右側向上 |
div {
transform: skewX(-40deg);
transform: skewY(50deg);
}（5）基點 - transform-origin
改變元素變化時的原點，默認情況下，元素的中心原點位于x軸和y軸的50%處，
3.影片
（1）關鍵幀 - @keyframes
css中的@規則，通過在影片序列中定義關鍵幀的樣式，來控制CSS影片序列中的步驟，以百分比來規定改變發生的時間，或者通過關鍵詞"from"和"to"，等價于0%和100%，
創建關鍵幀：
@keyframes move {
0% {transform: translate(0);}
100% {transform: translate(600px);}
}
/* 0%為開始時間 */
/* 100%為結束時間 */
/* move為幀名 */（2）影片名稱 - animation-name，指定影片要使用哪一個關鍵幀，
（3）結束時間 - animation-duration，代表一個影片周期的時長，默認值0秒，呼叫影片時必須寫：影片名稱、持續時間，
（4）運動方式 - animation-timing-function
| ease; | 默認值，先慢再快最后慢 |
| ease-in; | 先慢，后越來越快 |
| ease-in-out; | 速度在開始和結束時都很慢,中間不加速 |
| ease-out; | 先快，后越來越慢 |
| linear; | 勻速 |
| steps(數值, 定位) | 定位：start/end，默認為end指逐步運動 |
div {
animation-timing-function: steps(8,end);
}（5）延遲時間 - animation-delay，與過渡延遲時間同用，
（6）結束狀態 - animation-fill-mode，設定影片結束時盒子的狀態，在影片運行到某個位置的時候，影片停止，元素默認會迅速回到起始位置，
| forwards | 保持影片結束后的狀態 |
| backwards | 影片結束后回到最初的狀態 |
（7）執行順序 - animation-direction
| normal | 正向，默認值 |
| reverse | 反向 |
（8）回圈次數 - animation-iteration-count，其值通常為整數，默認為1，值infinite表示無限回圈，
（9）簡寫方式
格式：animation: 執行時間 延遲時間 關鍵幀名稱 運動方式 運動次數 結束狀態;
最簡：最簡方式 animation: 影片執行時間 執行關鍵幀名稱;（ 注意執行時間和延遲時間順序不可調整）
（10）影片停止 - animation-play-state，單獨寫，不可加入簡寫之中，
| running | 運動的（默認） |
| paused | 暫停 |
/*滑鼠移入ul時，暫停影片*/
.xz-roll ul:hover {
animation-play-state: paused;
}css樣式將對布局、字體、顏色、背景和其它文圖效果實作更加精確的控制，只通過修改一個檔案就改變頁數不計的網頁的外觀和格式， 在所有瀏覽器和平臺之間的兼容性，更少的編碼、更少的頁數和更快的下載速度，除了還不能全面支持我們常用的大多數瀏覽器之外，CSS在實作其它承諾方面作得相當出色，CSS在改變我們制作樣式表的方法，它為大部分的網頁創新奠定了基石，
CSS 終，
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/296923.html
標籤：其他