目錄

一、元素動效

1. 過渡 -?transition ?

2. 變化

3. 動畫

---

一、元素動效

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：過渡時間 延遲時間 過渡方式 過渡樣式（延遲時間必須寫在過渡時間以后，其他可以調換位置；最簡寫法為 transition:過渡時間）。

div {transition: 1s 1s ease background-color; }

（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 終。

總結

以上是生活随笔為你收集整理的CSS（七）元素过渡、变化、动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。