如何使用 CSS3 過渡和轉換來創建動畫

有趣的動畫可以使用 CSS3 通過使用變換和過渡來創建。 轉換用於使元素從一種狀態變為另一種狀態。 例如旋轉、移動、傾斜和縮放元素。 如果沒有轉換，正在轉換的元素會突然從一種狀態變為另一種狀態。 為防止這種情況，可以添加過渡，以便您可以控制更改，使其看起來更平滑。

如何使用 CSS3 變換

有幾種常用的轉換類型。 我們將專注於本教程的 2D 示例，但很高興知道 3D 變換也可以完成很酷的事情。 （一旦你掌握了 2D，3D 就會容易得多！）

在以下示例中，原始矩形呈深綠色，轉換後的矩形更加透明。

翻譯

translate()方法將元素從當前位置移動到新位置。
使用此代碼，調整後的矩形從當前位置向右移動 40 像素，向下移動 100 像素。

 -ms-transform: translate(40px, 100px); /* IE 9 */ -webkit-transform: translate(40px, 100px); /* Safari */ transform: translate(40px, 100px);

旋轉

rotate()方法將元素順時針或逆時針旋轉指定的度數。 此代碼將矩形順時針旋轉 40 度。

 -ms-transform: rotate(40deg); /* IE 9 */ -webkit-transform: rotate(40deg); /* Safari */ transform: rotate(40deg);

規模

scale()方法增加或減少元素的大小（根據給定的寬度和高度參數）。 在此示例中，調整後的矩形比其原始寬度大兩倍，比其原始高度大三倍。

 -ms-transform: scale(2, 3); /* IE 9 */ -webkit-transform: scale(2, 3); /* Safari */ transform: scale(2, 3);

偏斜X

使用skewX() ，只有 x 軸會受到影響。 這個矩形沿 x 軸傾斜 30 度：

 -ms-transform: skewX(30deg); /* IE 9 */ -webkit-transform: skewX(30deg); /* Safari */ transform: skewX(30deg);

傾斜Y

這是相同的想法，但在 y 軸上。 skewY()方法將元素沿 y 軸傾斜定義的角度。 該矩形沿 y 軸傾斜 30 度。

 -ms-transform: skewY(30deg); /* IE 9 */ -webkit-transform: skewY(30deg); /* Safari */ transform: skewY(30deg); }

傾斜

如果你想傾斜 x 軸和 y 軸，這可以在一個地方完成。 skew()方法使用指定角度沿 x 軸和 y 軸傾斜元素。 以下示例將矩形元素沿 x 軸傾斜 30 度，並沿 x 軸傾斜 20 度。

 -ms-transform: skew(30deg, 20deg); /* IE 9 */ -webkit-transform: skew(30deg, 20deg); /* Safari */ transform: skew(30deg, 20deg);

矩陣

這是事情變得有趣的地方，但在正確的情況下也會更有效率。 如果您正在進行大量變換並且不想將它們全部單獨寫出，則可以將這些 2D 變換與matrix()方法結合使用。

以下是要遵循的基本大綱：

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

請注意，需要進行一些研究才能得出矩陣中的值。 這是一份有用的入門指南。

為了製作這個例子，這裡是矩陣值：

 -ms-transform: matrix(2, -0.3, 0, 1, 0, 0); /* IE 9 */ -webkit-transform: matrix(2, -0.3, 0, 1, 0, 0); /* Safari */ transform: matrix(2, -0.3, 0, 1, 0, 0);

如何使用 CSS3 過渡

現在已經介紹了轉換，重要的是要注意它們經常與轉換一起使用。 這將在以下設計示例中更有意義。

最好記住，可以自定義值，以便按照您的意願在元素的兩種狀態之間進行轉換。 將其視為更改 CSS 屬性時控制動畫速度的一種方式。 您可能遇到過的一個例子是，如果您將鼠標懸停在一個按鈕上。 當您將鼠標懸停在它上面時，通常會看到“緩慢變暗”而不是快速變暗的顏色。 這種“緩慢變暗”是通過過渡創建的。

如果您要指定很多值，速記會派上用場。 transition CSS 屬性是transition-property 、 transition-duration 、 transition-timing-function和transition-delay的簡寫屬性。

過渡細節

transition-property指定將應用過渡的 CSS 屬性，因為您可以將過渡應用到單個屬性。 將過渡應用到單個屬性的示例將在背景或變換上。 如果您想定位站點上的所有屬性，可以將 transform 屬性設置為all 。

transition-duration有助於讓屬性的更改在指定的時間內發生，而不是立即發生。 您將看到秒和毫秒作為可能的值。

 transition-duration: 7s; transition-duration: 120ms; transition-duration: 2s, 3s; transition-duration: 10s, 30s, 230ms;

transition-timing-function CSS 屬性可讓您建立加速曲線，以便過渡速度可以在其持續時間內發生變化。 有很多選項可供試驗。

 transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;

transition-delay是不言自明的。 指定的值設置在過渡效果開始之前等待的秒數或毫秒數。 Initial會將屬性設置為其默認值。 如果指定了inherit ，這意味著它從其父元素繼承屬性。

 Here are all the properties: transition-property: background; //all transition-duration: 1s; transition-timing-function: linear; //other options are ease transition-delay: 0.5s;

這是過渡的基本速記設置：

 div { transition: [property] [duration] [timing-function] [delay]; }

完整的速記序列：

 div { transition: background 1s linear 0.5s; }

動畫策劃

在創建非常詳細的動畫之前，最好先退後一步，然後再創建一些完全瘋狂的東西（尤其是如果它將在網絡上公開）。 添加一些有趣的元素並沒有什麼錯，但是過度動畫很誘人。 您創建的動作應該傳達意義並增強用戶體驗，而不是分散注意力。 話雖如此，是時候開始創作了！

我確實想指出本教程中有動畫 gif 來顯示動畫。 這些 gif 是重複的，通常不會為設計完成。 讓它們重複的目的僅用於演示目的。

使用 CSS Transform 屬性移動圖像

在我們進入複雜的變換和過渡之前，讓我們談談軸網格上的坐標。 （注意：這可能會帶回數學課程中方格紙的記憶。）坐標用於移動圖像。

X 和 Y 坐標

事情看起來與您的預期略有不同。 -y 值在 x 軸上方。 HTML 和 CSS 使用所謂的“倒笛卡爾坐標系”，因為網頁從左上角開始向下閱讀。

動畫一：水平移動的基本變換

我們簡要介紹了 translate() 的基礎以及它如何移動元素。 付諸實踐時，它真的可以讓你的船漂浮起來。 正如我們在上面了解到的， translate() 方法將元素從其當前位置移動（根據給定的 x 軸和 y 軸參數）。

第一個項目是移動潛艇圖形。 潛艇需要偶爾浮出水面，所以我們會用translate()仔細設計它。

要使用transform: translate(x,y)將其從初始位置移動，必須指定兩個新值。 要使潛艇向右向上移動，x 值應​​為正值，y 值應為負值。 如果 y 值設置為 0，它只會向右移動而不會向上移動。

使用 transform() 升空的潛艇

在本例中，我們將對象向右移動 200px，向上移動 25px。 語法是transform: translate(200px,-25px); 並且對象將在.underwater的懸停上移動。 通過在.underwater:hover .move-right中創建移動樣式，動作將在懸停時發生。

這是開始的 HTML：

 <div class="underwater"> <div class="object submarine move-right"> <!-- image is set as a background image on submarine --> </div> </div>

在 Codepen 上看到這個。

製作這個基本動畫真的不需要很多 CSS：

 .underwater { position: relative; min-height: 600px; background-color: #4fc3da; } .underwater:hover .move-right{ transform: translate( 200px ,-25px ); -webkit-transform: translate( 200px ,-25px ); /** Chrome & Safari **/ -ms-transform: translate( 200px ,-25px ); /** Firefox **/ } .submarine { height: 200px; background: url("little-submarine.svg") no-repeat; } .object { transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/ -ms-transition: all 2s ease-in-out; /** Opera **/ }

如您所見，我們的坐標將落在右上角的方塊中。 懸停時，由於變換，潛艇向上移動到新坐標。

由於過渡，事情看起來很順利。 transition-duration設置為2sec ，這對於這個動畫來說並不太快。 transition-timing-function被設置為ease-in-out ，這使它的開始和結束更慢。 如果持續時間增加到更長的時間，這將非常明顯。

基礎動畫二：帶關鍵幀和動畫的水平移動

在此示例中，轉換的使用方式略有不同。 關鍵幀和動畫屬性將用於創建下一個動畫。

關鍵幀基礎

在@keyframes內部，您可以定義動畫的樣式和階段。 下面是我們將要使用的例子，它有助於產生“向下移動時淡入”的效果：

 @keyframes fadeInDown { 0% { opacity: .8; transform: translate(0, 0); } 100% { opacity: 1; transform: translate(0, 30px); } }

變換值被合併到關鍵幀中。 原來的placement設置為0%，100%時位置會向下移動30px。

動畫基礎

要使用 CSS3 動畫，您需要為動畫指定關鍵幀。

就像上面的設計一樣， @keyframes保存元素在特定時間將具有的樣式。

無論何時執行此操作，請確保為動畫指定一個描述性名稱。 在這種情況下，我們使用fadeOut 。 任何包含fadeOut類都將被應用。 在動畫的各個階段，“from”設置為 0%，“to”設置為 100%。 這個例子非常簡單，只有兩個階段，但肯定可以在中間添加更多步驟。

具有動畫子屬性的特定操作

animation 屬性用於在 CSS 選擇器中調用@keyframes 。 動畫可以而且通常會有多個子屬性。

關鍵幀定義動畫的外觀； 子屬性定義動畫的特定規則。 動畫序列應該如何進行的時間、持續時間和其他關鍵細節都包含在子屬性中。

以下是動畫子屬性的幾個示例：

• Animation-name： @keyframesat-rule的名稱，它描述了動畫的關鍵幀。 前面示例中的名稱fadeOut是animation-name的示例。
• 動畫持續時間：動畫完成一個完整週期所需的時間長度。
• Animation-timing-function：動畫的時間，具體來說就是動畫如何通過關鍵幀進行過渡。 該功能具有建立加速度曲線的能力。 例如linear 、 ease 、 ease-in 、 ease-out 、 ease-in-out或cubic-bezier 。
• 動畫延遲：元素加載時間和動畫開始之間的延遲。
• 動畫迭代計數：動畫應重複的次數。 想要動畫永遠持續下去嗎？ 您可以指定infinite無限期地重複動畫。
• Animation-direction：這決定了動畫是否應該在每次運行序列時交替方向或重置到起點並重複自身。
• 動畫填充模式：動畫在執行前後應用的值。
• 動畫播放狀態：使用此選項，您可以暫停和恢復動畫序列。 示例是none 、 forwards 、 backwards或both 。

 .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; -webkit-animation-duration: 4s; animation-duration: 4s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; animation-iteration-count: 1; }

這是速記的樣子：

 animation: 4s ease-in-out 1 paused fadeInDown;

這是 HTML 結構：

 <div class="underwater"> <div class="content-wrap fadeInDown"> <div class="submarine"></div> <h2>Cute Submarine</h2> <p>Text here.</p> </div> </div>

fadeInDown類使潛艇和內容上下移動。

通過調整關鍵幀使動畫更流暢

通過更多的關鍵幀，我們可以使動畫更加流暢。

 @keyframes fadeInDown { 0% { opacity: .8; transform: translateY(5px); } 25% { opacity: .9; transform: translateY(15px); } 50% { opacity: 1; transform: translateY(30px); } 75% { opacity: 1; transform: translateY(15px); } 100% { opacity: .9; transform: translateY(0); } }

在 Codepen 上看到這個。

調整動畫的時間

添加更多關鍵幀有助於平滑動畫，但我們可以通過更多關鍵幀和包含所有文本的 div 上的文本延遲來添加更多交互性。 讓潛艇從文本上反彈是一個有趣的效果，因此讓延遲與潛艇的運動保持一致可以做到這一點。

HTML 將應用有效的類：

 <div class="underwater"> <div class="submarine move-down fadeInDown"> </div> <div class="moving-content move-down text-delay fadeInDownText"> <p>Text goes here.</p> </div> </div>

這是允許交互式動畫的更新 CSS：

 @keyframes fadeInDown { 0% { opacity: .8; transform: translateY(0); } 25% { opacity: 1; transform: translateY(15px); } 50% { opacity: 1; transform: translateY(30px); } 75% { opacity: 1; transform: translateY(15px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeInDownText { 0% { opacity: .8; transform: translateY(0); } 100% { opacity: 1; transform: translateY(35px); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } .fadeInDownText { -webkit-animation-name: fadeInDownText; animation-name: fadeInDownText; } .move-down{ -webkit-animation-duration: 4s; animation-duration: 4s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1 } .text-delay { -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */ animation-delay: 2s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; }

在 Codepen 上看到這個。

CSS3動畫中的三次貝塞爾進度條

是時候製作一個進度條來慶祝我們的動畫進度了！

我們已經涵蓋的所有概念將結合在一起創建這樣的東西。 進度條是一種非常常見的 UI 元素，因此創建類似這樣的功能將幫助您了解如何為其他 Web 元素設置動畫。

這是開始的 HTML：

 <div class="container"> <div class="row"> <div class="masthead"> <p>CSS3 Loading Bar</p> </div> </div> <div class="fast-loader"></div> </div>

以及使它栩栩如生的 CSS：

 @keyframes speedSetting { 0% { width: 0px; } 100% { width: 100%; } } @keyframes progressMotion { 0% { opacity: 1; } 50% {opacity: 1; } 100% { opacity: 0; } } .fast-loader { width: 0px; height: 10px; background: linear-gradient(to left, blue,rgba(255,255,255,.0)); animation: speedSetting 2s cubic-bezier(1,.01,0,1) infinite, progressMotion 2s ease-out infinite; -webkit-animation: speedSetting 2s cubic-bezier(1,.01,0,1) infinite, progressMotion 2s ease-out infinite; }

在第一組關鍵幀中，寬度從 0% 變為 100%，持續時間為兩秒。 progressMotion中的關鍵幀控制著不透明度。

CSS 貝塞爾曲線

cubic-bezier()函數可以與transition-timing-function屬性一起使用，以控製過渡在其持續時間內如何改變速度。 你會在動畫中看到這一點。 看看它是如何開始慢一點然後加快步伐的？

將貝塞爾包裝器描繪成正方形會很有幫助。 左下角和右上角是關鍵點所在的地方，也就是P0和P3。 它們總是設置為 (0,0) 和 (1,1)，它們不會改變。 但是，如果您使用 x 或 y 值指定新點，則可以使用cubic-bezier()函數移動 P1 和 P2。

• x1是控制點p1的x坐標
• y1是控制點p1的y坐標
• x2是控制點p2的x坐標
• y2是控制點p2的y坐標

以下是一些示例值：

x1 = .7
y1 = .16
x2 = .2
y2 = .9

所以一個例子可能是這樣的：

 cubic-bezier(.7,.16,.2,.9)

進度條是貝塞爾曲線如何自定義動畫時間的一個很好的例子。 通過轉換、過渡和許多其他選項，可以輕鬆創建自定義動畫。 希望看到這些基本的 CSS3 動畫示例可以幫助您了解還有哪些其他可能性。