如何使用 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 軸上。 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 變換屬性移動圖像

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

X 和 y 坐標

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

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

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

第一個項目將是移動潛艇圖形。 潛艇需要不時出現空中，所以我們會小心地用translate()設置它的樣式。

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

使用 transform() 使潛艇升空

在本例中，我們將對象向右移動 200 像素，向上移動 25 像素。 語法是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 ，使其開始和結束速度較慢。 如果將持續時間增加到更大的時間，這將非常明顯。

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

在這個例子中，Transform 的使用略有不同。 關鍵幀和動畫屬性將用於創建下一個動畫。

關鍵幀基礎

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

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

  100% {
    opacity: 1;
    transform: translate(0, 30px);
  }
}

變換值被合併到關鍵幀中。 原始位置設置為 0%，設置為 100%，位置將向下移動 30px。

動畫基礎

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

如何使用 CSS 特徵查詢

網頁設計的世界是不斷變化的，跟上 CSS 的新設計趨勢是令人興奮的。 如果您是 CSS 的早期採用者，您可能已經期待使用 CSS Grid 之類的東西...

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

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

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

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

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

以下是動畫子屬性的一些示例：

• Animation-name： @keyframesat-rule的名稱，描述動畫的關鍵幀。 前面示例中的名稱fadeOut是animation-name的示例。
• Animation-duration：動畫完成一個完整週期所需的時間長度。
• Animation-timing-function：動畫的時序，特別是動畫如何通過關鍵幀過渡。 該功能具有建立加速度曲線的能力。 示例是linear 、 ease 、 ease-in 、 ease-out 、 ease-in-out或cubic-bezier 。
• Animation-delay：元素加載到動畫開始之間的延遲。
• Animation-iteration-count：動畫應該重複的次數。 想讓動畫永遠持續下去嗎？ 您可以指定infinite以無限期地重複動畫。
• Animation-direction：這決定了動畫是否應該在每次運行序列時交替方向或重置到起點並重複自身。
• Animation-fill-mode：動畫在執行之前和之後應用的值。
• 動畫播放狀態：使用此選項，您可以暫停和恢復動畫序列。 示例包括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%，持續時間為 2 秒。 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 動畫示例可以幫助您了解還有哪些其他可能性。

接下來是什麼：您會喜歡的 WordPress 插件

下載此電子書以獲取我們最推薦給開發人員的插件列表！ 我們發現所有這些插件都易於使用，不會對您的網站造成太大影響，而且非常可靠。