CSS制作動畫常用技巧有哪些

發布時間：2021-09-16 09:49:27 來源：億速云閱讀：119 作者：小新欄目：web開發

這篇文章主要介紹CSS制作動畫常用技巧有哪些，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

transition

CSS 中有一個transition屬性，能夠監聽某個 CSS 屬性的變化，通過屬性變化的控制，實現簡單的動畫效果：

transition CSS 屬性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一個簡寫屬性。

html代碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #fff;
        background: #000;
        border-radius: 4px;
        /* 使用 transition 偵聽 CSS 屬性變化 為其加上動畫 */
        transition: background 1s ease-in-out 0.2s, color 3s, width 5s;
      }
      .box:hover {
        width: 400px;
        color: #000;
        background: #fff;
      }
    </style>
  </head>
  <body>
    <div>
      <div>鼠標懸浮查看效果</div>
    </div>
  </body>
</html>

動畫效果點擊此處查看地址https://codepen.io/wjq990112/pen/PoqEemX

體驗完了，現在來具體講一下用法：

css代碼

transition: transition-property | transition-duration |
  transition-timing-function | transition-delay;

這樣寫你們估計看不懂，我們一條一條來拆解：

css代碼

transition-property: background; /* 任何你需要偵聽變化的 CSS 屬性 */
transition-duration: 1s; /* 設定過渡動畫的時長 */
transition-timing-function: ease-in-out; /* 設定過渡動畫的效果 */
transition-delay: 0.2s; /* 設定觸發動畫的延遲 */

而transition屬性就是由上面的 4 條 CSS 屬性組合而成。

第一第二個屬性是必須項，用于指定偵聽需要添加過渡動畫的屬性以及指定動畫時長。

第三第四個屬性為可選項，用于設定過渡動畫的效果和延遲。

transition-timing-function的可選值詳見
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function

第一個屬性還有 2 個特殊值：none：不對任何屬性進行偵聽 all：對所有屬性進行偵聽并為其添加過渡動畫。

當省略第三個屬性時，第二個時間項會被自動解析為動畫效果延遲。

干說還是有點難理解，舉個栗子吧：

css代碼

transition: background 1s ease-in-out 0.2s;

上面這個例子，就是前面的代碼中的一部分。

意思是偵聽background的變化，為其添加 1 秒的過渡動畫，過渡動畫的效果是慢開始慢結束，并在屬性變化 0.2 秒后才開始執行。

那么上面代碼中的這一段：

css代碼

.box {
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  background: #000;
  border-radius: 4px;
  /* 使用 transition 偵聽 CSS 屬性變化 為其加上動畫 */
  transition: background 1s ease-in-out 0.2s, color 3s, width 5s;
}
.box:hover {
  width: 400px;
  color: #000;
  background: #fff;
}

代碼中的transition屬性分別為background``color``width加上了過渡動畫，當class=box的標簽的這三個屬性發生變化時，就回自動為其加上默認或指定的動畫效果。

接下來我們就用它來做一些進階的用法：

在實現動畫的過程中，可能會需要使用一種常用的方式：overflow障眼法。

用于實現一些類似Tab切換的效果：

html代碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .wrapper {
        width: 100px;
        height: 100px;
        overflow: hidden;
      }
      #tabs {
        display: flex;
        width: 200px;
        height: 100px;
        transition: transform 0.3s;
      }
      .tab-pane-1 {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background: red;
      }
      .tab-pane-2 {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background: yellow;
      }
      .transform {
        transform: translateX(-50%);
      }
    </style>
  </head>
  <body>
    <div>
      <div id="tabs">
        <div>1</div>
        <div>2</div>
      </div>
    </div>
    <button onclick="switchTabPane()">切換Tab</button>

    <script>
      function switchTabPane() {
        var el = document.getElementById('tabs')
        el.className = el.className ? '' : 'transform'
      }
    </script>
  </body>
</html>

動畫效果點擊此處查看https://codepen.io/wjq990112/pen/MWwrXWo

實現這個效果只需要將容器設置為overflow: hidden;，然后對容器內的tab偵聽transform屬性，使用transform: translateX()使其在 X軸方向移動，大功告成了。

還有一些旋轉效果也可以使用transform: rotateZ();使其在瀏覽器平面上旋轉實現，默認是以幾何中心為中心點進行旋轉。

animation & keyframes

animation屬性的用法和transition比較相似，接下來由我來詳細介紹一下。

animation CSS 屬性是 animation-name，animation-duration，animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 屬性的一個簡寫屬性形式。

先做個簡單的旋轉效果體驗一下：

html代碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @keyframes rotate {
        0% {
          transform: rotateZ(0deg);
        }
        100% {
          transform: rotateZ(359deg);
        }
      }
      .rotate {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        color: #fff;
        background: red;
        /* 為元素設定 10s 的旋轉動畫 */
        animation: rotate 10s linear infinite;
      }
      .wrapper {
        display: flex;
        width: 200px;
        height: 200px;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div>
      <div>旋轉</div>
    </div>
  </body>
</html>

動畫效果點擊此處查看https://codepen.io/wjq990112/pen/mdJXeqm

這是一個基礎的旋轉動畫，用到了animation和keyframes兩個常用于制作動畫的 CSS 屬性。

animation

現在我們來講一下基礎用法：

css代碼

animation: animation-name | animation-duration | animation-timing-function |
  animation-delay | animation-iteration-count | animation-direction |
  animation-fill-mode | animation-play-state;

這樣講肯定還是不懂，繼續一條一條拆解開給大家講解：

css代碼

animation-name: rotate; /* 自定義 keyframes 名 */
animation-duration: 10s; /* 設定單次過渡動畫時長 */
animation-timing-function: linear; /* 設定單次過渡動畫效果 */
animation-delay: 0s; /* 設定單次過渡動畫延遲時間 */
animation-iteration-count: infinite; /* 設定過渡動畫執行次數 infinite 表示無限循環 */
animation-direction: normal; /* 設定過渡動畫方向 可對奇數偶數次動畫分別設定 */
animation-fill-mode: none; /* 設定過渡動畫的填充模式 */
animation-play-state: running; /* 設定過渡動畫運行或停止 */

相信大部分屬性都很好理解，只有兩個屬性可能會比較難理解。

animation-direction和animation-fill-mode應該可以說是最難理解的兩個屬性了，我們再詳細講解一下：

css代碼

/*
 *	normal: 按照 keyframes 設定的動畫方向運行
 *	reverse: 按照 keyframes 設定的動畫方向的反方向運行
 *	alternate: 先按照 keyframes 設定的動畫方向運行 運行結束后再反方向運行
 *	alternate-reverse: 先按照 keyframes 設定的動畫方向的反方向運行 運行結束后再正向運行
 */
animation-direction: normal | reverse | alternate | alternate-reverse;
/*
 *	none: 不設定填充模式 默認在動畫開始及結束時都停留在動畫未開始的狀態
 *	forwards: 動畫結束后停留在動畫的最后一幀
 *	backwards: 動畫開始前停留在動畫的第一幀
 *	both: 動畫開始前和動畫結束后分別停留在動畫的第一幀和最后一幀
 */
animation-fill-mode: none | forwards | backwards | both;

這兩個屬性可以說是最難理解的，如果想看設定之后的效果，可以轉戰MDN。

keyframes

這個CSS屬性，相信學過一些簡單的動畫制作的同學肯定了解，很簡單，就是關鍵幀。

為一個動畫設定關鍵幀，CSS將自動填充他的運動路徑。

css代碼

@keyframes rotate {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(359deg);
  }
}

上面這段代碼，就是為設定了animation屬性的div標簽創建了兩個關鍵幀，一個是動畫起始位置的樣式，另一個是動畫結束位置的樣式，CSS將自動填充動畫的過程（即旋轉 359 度）。

不僅僅可以設置開始和結束的位置（0%可以使用from關鍵字代替，100%可以使用to關鍵字代替），還可以在動畫的運行過程中插入關鍵幀，例如33%，50%，66%等等，CSS會按照關鍵幀的樣式，對動畫進行自動填充。

通常情況下，keyframes會與animation配合使用。

講完了animation和keyframes的用法，我們來看一道面試題，來自本人 2020 年某跳動實習生招聘一面：

請你使用 CSS 實現一個方塊來回移動，無限循環。

這個題目其實有 2 種做法，但是原理都是一樣的，這里就不放 HTML 代碼了，直接放 CSS 的部分：

/*
 *	①
 */
@keyframes move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(0);
  }
}
.move {
  width: 100px;
  height: 50px;
  background: yellow;
  animation: move 1s linear infinite;
}
/*
 *  ②
 */
@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}
.move {
  width: 100px;
  height: 50px;
  background: yellow;
  animation: move 0.5s linear infinite alternate;
}

以上是“CSS制作動畫常用技巧有哪些”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！

向AI問一下細節

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

CSS制作動畫常用技巧有哪些

transition

animation & keyframes

猜你喜歡

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

CSS制作動畫常用技巧有哪些

transition

animation & keyframes

猜你喜歡

最新資訊

相關推薦

相關標簽