Github上流行的CSS3動畫效果庫，你有沒有嘗試過-animate.css

紹

animate.css是一堆很酷，有趣且跨瀏覽器的動畫，供你在項目中使用。非常適合強調，主頁，滑塊和一般的加水效果。

animate.css v4正在進行許多改進和重大更改，包括CSS自定義屬性支持（又稱CSS變量）和類前綴，以確保安全使用。感興趣的小伙伴可以上github關注進展以及提供反饋！

Github

animate.css的受歡迎程度毋庸置疑，在Github上star數高達接近63k，這是一個非?？捎^的數據，我相信其實大多數人或多或少都用過它

https://daneden.github.io/animate.css/

安裝使用

使用npm安裝

$ npm install animate.css --save

或者 yarn:

$ yarn add animate.css

要在你網站中使用animate.css，只需將樣式表放入文檔的<head>中，然后將動畫類（animated）與任何動畫名稱一起添加到元素中，那么一個簡單的動畫效果就實現了，一下就是一個最簡單的例子：

<head>
 <link rel="stylesheet" href="animate.min.css">
</head>

<h1 class="animated infinite bounce delay-2s">Example</h1>

以下是你可以使用的所用動畫效果class

可以更改動畫的持續時間，添加延遲或更改動畫播放的次數：

.yourElement {
 animation-duration: 3s;
 animation-delay: 2s;
 animation-iteration-count: infinite;
}

JavaScript的用法：

將animate.css與Javascript結合使用時，可以使用animate.css進行大量其他工作。一個簡單的例子：

const element = document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')

還可以檢測動畫何時結束：

const element = document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')
element.addEventListener('animationend', function() { doSomething() })

可以使用以下簡單功能來添加和刪除動畫：

function animateCSS(element, animationName, callback) {
 const node = document.querySelector(element)
 node.classList.add('animated', animationName)
 function handleAnimationEnd() {
 node.classList.remove('animated', animationName)
 node.removeEventListener('animationend', handleAnimationEnd)
 if (typeof callback === 'function') callback()
 }
 node.addEventListener('animationend', handleAnimationEnd)
}

并像這樣使用它：

animateCSS('.my-element', 'bounce')

// or
animateCSS('.my-element', 'bounce', function() {
 // Do something after animation
})

注意，這些示例使用的是ES6的const聲明，不再支持IE10和某些古老的瀏覽器。

設定延遲和速度：

可以直接在元素的class屬性上添加延遲，如下所示：

<div class="animated bounce delay-2s">Example</div>

快慢class

通過添加這些類，可以控制動畫的速度，如下所示：

<div class="animated bounce faster">Example</div>

自定義構建

Animate.css由gulp.js提供支持，這意味著你可以輕松創建自定義版本。

總結

有些時候你看到別人的網站，感覺速度也不是很快，但是很自然，那么很有可能是使用了動畫，使用動畫不會加快網站的訪問速度，但是可以讓網頁瀏覽器來更加的平滑、更加的自然，使用起來會感覺很舒適，不會給人卡頓的感覺！

. CSS 動畫有哪些? transition過渡與animation動畫的區別是什么？

1. transition 過渡
2. transform 變形
3. animation 關鍵幀動畫

2. 首先介紹各個動畫的語法+屬性

2.1 transition 過渡

1. 語法:
   1. transition: property duration timing-function delay
      1. transition: 屬性是個復合屬性
      2. transition-property: 規定設置過渡效果的 css 屬性名稱
      3. transition-duration: 規定完成過渡效果需要多少秒或毫秒
      4. transition-timing-function: 指定過渡函數, 規定速度效果的速度曲線
      5. transition-delay: 指定開始出現的延遲時間
2. 默認值分別為: all 0 ease 0;
   1. 注: transition-duration 時長為 0, 不會產生過渡效果

3. 改變多個 css 屬性的過渡效果時, 代碼示例:
   1.  a {
         transition: background 0.8s ease-in 0.3s, color 0.6s ease-out 0.3s;
       }
4. 子屬性:
   1. transition-property
      1. transition-property: none |all |property;
         1. 值為 none 時, 沒有屬性會獲得過渡效果
         2. 值為 all 時, 所有屬性都將獲得過渡效果
         3. 值為指定的 css 屬性應用過渡效果, 多個屬性用逗號隔開
     2. color : background-color, border-color, color, outline-color ;
     3. length : 真實的數字 如：word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,
     4. integer : 離散步驟（整個數字）, 在真實的數字空間, 以及使用 floor()轉換為整數時發生 如: outline-offset,z-index
     5. number : 真實的（浮點型）數值, 如:zoom,opacity,font-weight
     6. rectangle : 通過x, y, width 和 height（轉為數值）變換，如: crop
     7. visibility : 離散步驟，在0到1數字范圍之內，0表示“隱藏”，1表示完全“顯示”,如：visibility
     8. shadow : 作用于color, x, y 和 blur（模糊）屬性,如：text-shadow
     9. background-image : 通過每次停止時的位置和顏色進行變化。它們必須有相同的類型（放射狀的或是線性的）和相同的停止數值以便執行動畫。
   2. transition-duration
     1. transition-duration: time;
        1. 該屬性主要用來設置一個屬性過渡到另一個屬性所需的時間, 也就是從舊屬性過渡到新屬性花費的時間長度, 俗稱持續時間
   3. transition-timing-function
     1. transition-timing-function: linear| ease| ease-in| ease-out| ease-in-out| cubic-bezier(n,n,n,n);
        1. 該屬性指的是過渡的 “緩動函數” 。 主要用來指定瀏覽器的過渡速度, 以及過渡期間的操作進展情況, 解釋下:
        2. 注意: 值 cubic-bezier(n,n,n,n) 可以定義自己的值, 如 cubic-bezier(0.42,0,0.58,1)
   4. transition-delay
      1. 這個屬性沒什么說的了, 就是過渡效果開始前的延遲時間, 單位秒或者毫秒

2.2 transform 變形

1. 可以利用 transform 功能來實現文字或圖像的 旋轉、縮放、傾斜、移動 這四種類型的變形處理
   1. 旋轉 rotate
      1. 用法: transform: rotate(45deg);
      2. 共一個參數 “角度”, 單位 deg 為度的意思, 正數為順時針旋轉, 負數為逆時針旋轉, 上述代碼作用是順時針旋轉45度
   2. 縮放 scale
      1. 用法: transform: scale(0.5)  或者  transform: scale(0.5, 2);
      2. 一個參數時: 表示水平和垂直同時縮放該倍率
      3. 兩個參數時: 第一個參數指定水平方向的縮放倍率, 第二個參數指定垂直方向的縮放倍率 。
   3. 傾斜 skew
      1. 用法: transform: skew(30deg)  或者 transform: skew(30deg, 30deg);
      2. 一個參數時: 表示水平方向的傾斜角度 。
      3. 兩個參數時: 第一個參數表示水平方向的傾斜角度, 第二個參數表示垂直方向的傾斜角度 。
      4. skew 的默認原點 transform-origin 是這個物件的中心點
   4. 移動 translate
      1. 用法: transform: translate(45px)  或者 transform: translate(45px, 150px);
      2. 一個參數時: 表示水平方向的移動距離;
      3. 兩個參數時: 第一個參數表示水平方向的移動距離, 第二個參數表示垂直方向的移動距離 。
2. 基準點 transform-origin
   1. 在使用 transform 方法進行文字或圖像的變形時, 是以元素的中心點為基準點進行的 。 使用 transform-origin 屬性, 可以改變變形的基準點 。
   2. 用法: transform-origin: 10px 10px;
   3. 表示相對左上角原點的距離, 單位 px, 第一個參數表示相對左上角原點水平方向的距離, 第二個參數表示相對左上角原點垂直方向的距離;
   4. 兩個參數除了可以設置為具體的像素值, 其中第一個參數可以指定為 left、center、right, 第二個參數可以指定為 top、center、bottom。
3. 多方法組合變形
   1. 用法: transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);
   2. 這四種變形方法順序可以隨意, 但不同的順序導致變形結果不同, 原因是變形的順序是從左到右依次進行

2.3 animation 關鍵幀動畫

1. 在 CSS3 中創建動畫, 您需要學習 @keyframes 規則 。
2. @keyframes 規則用于創建動畫 。 在 @keyframes 中規定某項 CSS 樣式, 就能創建由當前樣式逐漸改為新樣式的動畫效果 。
3. 必須定義動畫的名稱和時長 。 如果忽略時長, 則動畫不會允許, 因為默認值是 0。
4. 請用百分比來規定變化發生的時間, 或用關鍵詞 "from" 和 "to", 等同于 0% 和 100% 。
5. 語法
   1. animation: name duration timing-function delay iteration-count direction;
     1. animation-name    規定需要綁定到選擇器的 keyframe 名稱
     2. animation-duration   規定動畫完成一個周期所花費的秒或毫秒。默認是 0。
     3. animation-timing-function    規定動畫的速度曲線。 默認是 "ease"。
     4. animation-delay    規定動畫何時開始 。 默認是 0。
     5. animation-iteration-count    規定動畫被播放的次數 。 默認是 1。
     6. animation-direction    規定動畫是否在下一周期逆向地播放 。 默認是 "normal"; alternate (輪流),。
        1. alternate (輪流): 動畫播放在第偶數次向前播放, 第奇數次向反方向播放 (animation-iteration-count 取值大于1時設置有效
        2. 語法: animation-direction: alternate;
   2. animation-play-state   規定動畫是否正在運行或暫停 。 默認是 "running" 播放; paused 暫停播放 。
        1. 語法: animation-play-state: paused;
   3. animation-fill-mode   屬性規定動畫在播放之前或之后, 其動畫效果是否可見; 規定對象動畫時間之外的狀態; none | forwards | backwards | both 。
        1. none:        不改變默認行為 (默認, 回到動畫沒開始時的狀態) 。
        2. forwards:    當動畫完成后，保持最后一個屬性值（在最后一個關鍵幀中定義) (動畫結束后動畫停留在結束狀態) 。
        3. backwards:  在 animation-delay 所指定的一段時間內, 在動畫顯示之前, 應用開始屬性值 (在第一個關鍵幀中定義) （動畫回到第一幀的狀態）。
        4. both:        向前和向后填充模式都被應用 （根據 animation-direction 輪流應用 forwards 和 backwords 規則）。
        5. 語法:        animation-fill-mode: forwards
   1. 0% 是動畫的開始, 100% 是動畫的完成。

3. 接下來是常見的面試題目以及實現代碼

3.1 transition 示例一

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 動畫- transition </title>
</head>
<style>
* {
  padding: 0;
  margin: 0;
}
/* CSS實現示例 */
.w_tran-css {
  width: 350px;
  height: 350px;
  background: url('./images/1-2-https原理.jpg') no-repeat center;
  transition: all 1s ease-in-out;
  background-size: 110%;
  border: 5px solid slateblue;
}
.w_tran-css:hover {
  background-size: 120%;
  border: 5px solid skyblue;
}

</style>
<body>
  <div class="w_tran-css">
    <p>transition 動畫 --- 測試背景圖中的動畫效果</p>
  </div>
</body>
</html>

展示效果如圖所示:

3.2 transition 示例二

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 動畫 - transition</title>
</head>
<style>
* {
  margin: 0;
}
.w_outer {
  display: flex;
  justify-content: center;
  background-color: skyblue;
  height: 100vh;
}
nav {
  display: flex;
  width: 80%;
  height: 40px;
  gap: 40px;
}

a {
  flex: 1;
  background-color: #333;
  color: #fff;
  border: 1px solid;
  padding: 8px;
  text-align: center;
  text-decoration: none;
  transition: all 0.5s ease-out;
}

a:hover, a:focus {
  background-color: steelblue;
  color: #333;
}
</style>
<body>
  <div class="w_outer">
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact Us</a>
      <a href="#">Links</a>
    </nav>
  </div>
</body>
</html>

展示效果如圖所示:

3.3 transform 示例一

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 動畫 - transform</title>
</head>
<style>
* {
  padding: 0;
  margin: 0;
}
/* 簡單示例-1 */
.w_outer {
  width: 300px;
  border: 120px solid red;
}
#btn {
  display: inline-block;
  width: 300px;
  height: 300px;
  border: 1px solid blue;
  position: relative;
  cursor: pointer;
}
.ball {
  border-radius: 25px;
  width: 50px;
  height: 50px;
  background: rgb(17, 8, 8);
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 1s;
}

/* 簡單示例-1 */
.w_img {
  width: 300px;
  /* transform 設置動畫時, 需要配合 transition 來設置過渡時間*/
  transition: 1s;
}
.w_img:hover {
  transform: rotate(90deg);
  transform-origin: 0, 0 ;
}

/* 簡單示例-3 */
.w_trans-3 {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
}

</style>
<body>
  <!-- 示例一 -->
  <div class="w_outer">
    <div id="btn">
      <p>transform --- 動畫 Click anywhere to move the ball</p>
      <div id="foo" class="ball"></div>
    </div>
  </div>
  <!-- 示例二 -->
  <img class="w_img" src="./images/1-https-注釋.png" alt="">

  <!-- 示例三 -->
  <div class="w_trans-3">transform - 設置變形</div>
</body>
<script>
var f = document.getElementById('foo');
var far = document.getElementById('btn')
far.onclick =  function(ev, obj){
  f.style.transform = 'translateY('+(ev.clientY - 25 - this.offsetLeft)+'px)';
  f.style.transform += 'translateX('+(ev.clientX - 25 - this.offsetTop)+'px)';
};
</script>
</html>

展示效果如圖所示:

3.4 transform 示例二

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 動畫 - transform -- 經典旋轉正方體</title>
</head>
<style>

  ul{
    position: relative;
    height: 500px;
    width: 500px;
    list-style: none;
    margin: 100px auto;
    transform-style: preserve-3d;
    animation: ani 4s linear 0s infinite;
  }
  li{
    position:absolute;
    height: 500px;
    width: 500px;
    font-size: 32px;
    text-align: center;
    line-height: 500px;
    backface-visibility: hidden;
  }


  .w_noodle-1 {
    background-color:  green;
    transform: translateZ(250px);
  }
  .w_noodle-2 {
    background-color: yellow;
    transform: rotateY(90deg) translateZ(250px);
  }
  .w_noodle-3 {
    background-color: orange;
    transform: rotateX(90deg) translateZ(250px);
  }
  .w_noodle-4 {
    background-color: red;
    transform: rotateX(-90deg) translateZ(250px);
  }
  .w_noodle-5 {
    background-color:blue;
    transform: rotateY(-90deg) translateZ(250px);
  }
  .w_noodle-6 {
    background-color:purple;
    transform: rotateX(180deg) translateZ(250px);
  }

  @keyframes ani{
    100%{
      transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
  }
</style>
<body>
<ul>
  <li class="w_noodle-1">1</li>
  <li class="w_noodle-2">2</li>
  <li class="w_noodle-3">3</li>
  <li class="w_noodle-4">4</li>
  <li class="w_noodle-5">5</li>
  <li class="w_noodle-6">6</li>
</ul>
</body>
</html>

展示效果如圖所示:

3.4 A transform 示例三

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 動畫 - transform -- 時鐘</title>
</head>
<style id="css">
li{
  list-style: none;
}
#w_outer{
  width: 400px;
  height: 400px;
  position: absolute;
  top:calc(50% - 200px);
  left:calc(50% - 200px);
  border: 2px solid palegoldenrod;
}
#w_cont{
  width: 200px;
  height: 200px;
  position: absolute;
  top:calc(50% - 100px);
  left:calc(50% - 100px);
  border: 2px solid cyan;
  border-radius: 50%;
}
.w_h-item{
  width: 4px;
  height: 12px;
  position: absolute;
  top: 0;
  left: calc(50% - 2px);
  background-color: gray;
  transform-origin: 2px 100px;
}
.angle30{transform : rotate(30deg);}
.angle60{transform : rotate(60deg);}
.angle90{transform : rotate(90deg);}
.angle120{transform : rotate(120deg);}
.angle150{transform : rotate(150deg);}
.angle180{transform : rotate(180deg);}
.angle210{transform : rotate(210deg);}
.angle240{transform : rotate(240deg);}
.angle270{transform : rotate(270deg);}
.angle300{transform : rotate(300deg);}
.angle330{transform : rotate(330deg);}
#fixPoint{
  width: 10px;
  height: 10px;
  position: absolute;
  top:calc(50% - 5px);
  left:calc(50% - 5px);
  background-color: cadetblue;
  border-radius: 50%;
}
#hour{
  width: 6px;
  height: 70px;
  position:absolute;
  top: 40px;
  left: calc(50% - 3px);
  background-color: darkblue;
  transform-origin: 50% 60px;
}
#minute{
  width: 4px;
  height: 75px;
  position:absolute;
  top: 35px;
  left: calc(50% - 2px);
  background-color: yellow;
  transform-origin: 50% 65px;
}
#second{
  width: 2px;
  height: 90px;
  position:absolute;
  top: 20px;
  left: calc(50% - 1px);
  background-color: red;
  transform-origin: 50% 80px;
}
</style>
<body>
<div id = "w_outer">
  <div id = 'w_cont'>
    <ul id = "w_hour-line">
      <li class = "w_h-item"></li>
      <li class = "w_h-item angle30"></li>
      <li class = "w_h-item angle60"></li>
      <li class = "w_h-item angle90"></li>
      <li class = "w_h-item angle120"></li>
      <li class = "w_h-item angle150"></li>
      <li class = "w_h-item angle180"></li>
      <li class = "w_h-item angle210"></li>
      <li class = "w_h-item angle240"></li>
      <li class = "w_h-item angle270"></li>
      <li class = "w_h-item angle300"></li>
      <li class = "w_h-item angle330"></li>
    </ul>
    <div id = "fixPoint"></div>
    <!-- 時針 -->
    <div id = "hour" class="min"></div>
    <!-- 分針 -->
    <div id = "minute" class="sec"></div>
    <!-- 秒針 -->
    <div id = "second" class="circle"></div>
  </div>
</div>
</div>
</body>
<script>


window.onload = function(){
  var hourHand = document.getElementById('hour');
  var minuteHand = document.getElementById('minute');
  var secondHand = document.getElementById('second');

  // 初始化(細節知識點: 如果這里不執行初始化, 在頁面顯示的內容會有一個閃屏的問題: 分針、時針、秒針，重疊在12點這個位置)
  initTime()
  // 執行定時器
  setInterval(initTime, 1000)

  function initTime() {
    var nowTime = new Date();

    // 求取時針角度(這里 -12 在顯示上是正確的)
    var hourVal = nowTime.getHours() - 12;
    var hourDeg = hourVal / 12 * 360 + 'deg';

    // 求取分針角度
    var minuteVal = nowTime.getMinutes();
    var minuteDeg = minuteVal / 60 * 360 + 'deg';

    // 求取秒針角度
    var secondVal = nowTime.getSeconds();
    var seconDeg = secondVal / 60 * 360 + 'deg';


    // 原生方法: 利用 DOM 元素的 style 屬性設置
    hourHand.style.transform = 'rotate('+ hourDeg + ')';
    minuteHand.style.transform = 'rotate('+ minuteDeg + ')';
    secondHand.style.transform = 'rotate('+ seconDeg + ')';
  }
}
</script>
</html>

展示效果如圖所示:

3.6 animation 示例一

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 動畫 -- animation 關鍵幀動畫</title>
</head>
<style>
  p {
    width:300px;
    height:300px;
    background:red;
    animation:myfirst 3s infinite alternate;
    /* //Firefox */
    -moz-animation:myfirst 3s infinite alternate;
    /* // Safari and Chrome */
    -webkit-animation:myfirst 3s infinite alternate;
    /* // Opera */
    -o-animation:myfirst 3s infinite alternate;
  }
  @keyframes myfirst {
    from {background:red;}
    to {background:yellow;}
  }
  /* // Firefox */
  @-moz-keyframes myfirst {
    from {background:red;}
    to {background:yellow;}
  }
  /* // Safari and Chrome */
  @-webkit-keyframes myfirst {
    from {background:red;}
    to {background:yellow;}
  }
  /* // Opera */
  @-o-keyframes myfirst {
    from {background:red;}
    to {background:yellow;}
  }
</style>
<body>
  <p>無限循環播放動畫效果</p>
</body>
</html>

展示效果如圖所示:

3.7 animation 示例二

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 動畫 -- animation 關鍵幀動畫</title>
</head>
<style>
p {
  background-color: skyblue;
  font: 96px "Microsoft Yahei";
  font-weight: 500;
  text-align: center;
  color: #f35626;
  cursor: pointer;
}
p:hover {
  animation:rubberBand 1.5s;
}
@-webkit-keyframes  rubberBand{
  0%{
    -webkit-transform:scale(1);
    transform:scale(1)
  }
  30%{
    -webkit-transform:scaleX(1.25) scaleY(0.75);
    transform:scaleX(1.25) scaleY(0.75)
  }
  40%{
    -webkit-transform:scaleX(0.75) scaleY(1.25);
    transform:scaleX(0.75) scaleY(1.25)
  }
  60%{
    -webkit-transform:scaleX(1.15) scaleY(0.85);
    transform:scaleX(1.15) scaleY(0.85)
  }
  100%{
    -webkit-transform:scale(1);
    transform:scale(1)
  }
}
@keyframes rubberBand{
  0%{
    -webkit-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1)
  }
  30%{
    -webkit-transform:scaleX(1.25) scaleY(0.75);
    -ms-transform:scaleX(1.25) scaleY(0.75);
    transform:scaleX(1.25) scaleY(0.75)
  }
  40%{
    -webkit-transform:scaleX(0.75) scaleY(1.25);
    -ms-transform:scaleX(0.75) scaleY(1.25);
    transform:scaleX(0.75) scaleY(1.25)
  }
  60%{
    -webkit-transform:scaleX(1.15) scaleY(0.85);
    -ms-transform:scaleX(1.15) scaleY(0.85);
    transform:scaleX(1.15) scaleY(0.85)
  }
  100%{
    -webkit-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1)
  }
}
</style>
<body>
<div>
  <p>Animate.css</p>
</div>
</body>
<script>

</script>
</html>

展示效果如圖所示:

之前有整理過部分知識點, 現在將整理的相關內容, 驗證之后慢慢分享給大家; 這個專題是 "前端面試題" 的相關專欄; 大概會有200+的文章。

如果對大家有所幫助，可以點個關注、點個贊; 文章會持續打磨。

有什么想要了解的前端知識, 可以在評論區留言, 會及時分享所相關內容。

我們看到設計精美的科技巨頭網站（如Apple或微軟）或特斯拉或梅賽德斯等汽車公司時，我們每個人都會感到震驚。

使這些網站脫穎而出的因素，往往是吸引人的動畫和效果，讓我們一次又一次地看。

那么，他們如何使網站如此驚人地互動？

有沒有想過這些網站上的動畫實際上是如何運作的？

您是否希望為您的企業設計一個同樣優雅和互動的網站？

如果是的話，那就別再看了。

請繼續閱讀，因為這是一個廣泛的摘錄，涵蓋了CSS動畫和變換的基礎知識，可以極大地幫助您實現商業網站的相同功能。

如果您剛剛進入前端開發領域，或者希望擴展您對前端開發的理解，那么請繼續閱讀此博客，因為在最后，您將全面了解CSS。

CSS或層疊樣式表是您會注意到的Web應用程序的相當一部分。

雖然CSS為Web應用程序設置了樣式，但HTML或超文本標記語言構成了它。

動畫在改善用戶體驗方面發揮著關鍵作用，因為它們有助于提供改進的視覺反饋，并有助于與網站進行交互。

CSS 3具有豐富的內置屬性，大大有助于動畫元素，并且在所有主流瀏覽器中也是如此。

但是 - 強大的力量，更大的責任。

動畫需要明智地使用，否則你最終可能會創建一個比交互式更令人分心的頁面。動畫的整個目的是作為一種輔助，而不是在使用Web應用程序時的障礙。

根據谷歌的一份報告，幾乎50％的網絡流量來自移動設備。因此，任何企業都需要創建適合移動設備的動畫。

對CSS（最好是CSS 3），HTML和某些jQuery 有基本的了解也很有必要。jQuery是一個Javascript庫，可以幫助開發人員使用網站的元素。這方面的技術術語是 - DOM操作。

由于您的目標受眾可能會有所不同，因此您可能使用多種網絡瀏覽器（Mozilla Firefox，Google Chrome，Safari，Opera，Internet Explorer），因此需要滿足所有這些需求。

CSS動畫有三個重要方面：

Transforms(變換)
Transitions(轉變)
Keyframes(關鍵幀)

描述CSS中動畫和變換的關鍵元素的流程圖。

A部分：Transforms

變換有助于以各種奇妙的方式改變您的網頁元素 - 從移動元素到重新調整大小，從旋轉元素到傾斜它。

最好的部分 - 您可以在不改變文檔流程的情況下更改任何內容。

變換有四個重要方面：

Translate
Translate
Rotate
Skew

讓我們深入挖掘一下，好嗎？

1.Translate

基于Translate將對象從一個點移動到另一個點基本上。

資料來源：0fps.net

Translate會更改元素的坐標。它用于更改2D平面上組件的外觀。

Translate意味著在網頁上簡單地將元素從一個位置移動到另一個位置。您可以在X軸，Y軸或兩者上平移對象。

Moves the element on the X-axis
Syntax: transform: translateX(200px); or transform: translateX(-200px);
Moves the element on the Y-axis
Syntax: transform: translateY(200px); or transform: translateY(-200px);
Using shorthand
Syntax: transform: translate(x-axis, y-axis)
Example: transform: translate(200px, 200px);
Alert!
transform: translate(200px); [will only translate the element along the X-axis]

2.Scale

資料來源：camo.envatousercontent.com

人們可以使用圖像的大小以及軸X和Y.縮放會扭曲元素的形狀并降低元素的質量。大于1的數字將增加大小，小于1的小數將減小大小。

Scaling along the X-axis - transform: scaleX(3);
Scaling along the Y-axis - transform: scaleY(0.5);
Using the shorthand - for scaling along X and Y axis together -
transform: scale(3 , 0.5); or transform: scale(0.5);

3.Rotate

您可以順時針或逆時針旋轉元素。使用的測量單位是度。正值將順時針旋轉元素，反之亦然。這種旋轉也會沿X，Y和Z軸發生。

資料來源：gamedev.stackexchange.com

理解CSS動畫中的旋轉是最棘手的部分之一，因此很多人無法利用此功能的真正潛力。

沿著X軸

想象一下，棉花糖在篝火上旋轉時被烤。您必須將元素可視化以與X軸一起轉換為頁面，這就是X軸上的旋轉效果。我們不會看到3D旋轉，我們能夠看到的是元素高度的變化。

Syntax: transform: rotateX(45deg);

沿著Y軸

想象一個桿子上的舞者。元素將沿Y軸旋轉到頁面中。你會注意到的是組件的寬度變化了。

Syntax: transform: rotateY(45deg);

沿Z軸

這是使用旋轉時可以使用的最佳方向，因為您可以看到實際旋轉的元素。也可以分別用正和負旋轉值修改順時針和逆時針運動。為此，嘗試想象箭頭進入頁面并且元素相對于該箭頭旋轉。

transform: rotateZ(45deg) – clockwise rotation
transform: rotateZ(-45deg) – counterclockwise rotation

Skew

4.gif

Skew元件意味著傾斜。它具有正值和負值，并且像旋轉一樣，它也以度來度量。

正X值將元素向左彎曲，反之亦然，對于負X.同樣，正Y值向下傾斜元素，反之亦然。默認情況下，如果變換中未指定X或Y，則它將相對于X軸移動元素。

Along X-axis
transform: skewX(45deg) or skew(45deg);
Along Y-axis
transform: skewY(80deg);

5.組合變換

也可以將多個轉換應用于單個轉換語句中。順序確實很重要（有時），因為第二個變換將應用于第一個變換，第三個變換將應用于前兩個變換的結果。

資料來源：commons.wikimedia.org

transform: translateX(200px) rotateX(45deg) scaleY(1.5) skewX(45deg);

所有這些變換都將對某些用戶事件生效，例如懸停，點擊，焦點，活動等。要查看動作中的魔法，您可以在這些事件中添加變換。

.element-to-animate{
display: block
}
.element-to-animate:hover{
transform: translateX(200px) rotateX(45deg) scaleY(1.5) skewX(45deg);
}

B部分：TRANSITIONS

資料來源：mozillademos.org

如果您有機會查看上面的代碼，您可能會注意到在狀態更改期間懸停時的混蛋; 這恰恰是Transitions的目的。Transitions有助于使動畫流暢。

可以借助以下屬性控制轉換：

transition-property
transition-duration
transition-timing-function
transition-delay

transition-property

這些是可以使用轉換的CSS屬性。其范圍從使用邊距和填充到背景和邊框。您可以將轉換應用于特定功能或完整列表?？稍?strong>此處找到此權限范圍內所有屬性的完整列表。

將transition屬性應用于特定的CSS屬性

transition-property: background-color;

將轉換應用于整個CSS屬性列表

transition-property: all;

transition-duration

動畫將在其中播放的持續時間。這可以很容易地以秒（s）或毫秒（ms）來測量。建議使用秒，因為它使它們易于閱讀 - 即使你辦公室的同事也不會被你惹惱！

transition-duration: 0.5s;

transition-timing-function

速度可以通過動畫來改變用戶體驗; 因此建議控制它。您可以通過使用transition-timing-function來實現它。

CSS 3團隊非常友好地為我們提供了一些內置的速度值，如ease, ease-in, ease-in-out

如果你希望掌握速度的全部命令 - 使用Bezier曲線。

transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

transition-delay

這有助于在啟動動畫的觸發事件和動畫的實際開始之間創建暫停。簡單地說，轉換延遲 - 延遲動畫。它以秒（s）或毫秒（ms）為單位進行測量。

transition-delay: 0.5s;

速記：

transition: (property) (duration) (transition-timing-function) (transition-delay);

兩個面向時間的功能的順序，即持續時間和轉換延遲問題！

Transforms和Transitions一起使用

7.gif

狀態1：NORMAL

.element-to-animate display: block; transition: transform 1s ease 0.2s, background 1s; }

狀態2：HOVER

.element-to-animate:hover{ background: black; transform: translateX(200px); }

對于在狀態1和狀態2之間轉換，可以將轉換分別應用于所有屬性和單個時序，或者如果要在狀態2中的所有屬性上應用轉換，則：

transition: all 1s ease 0.2s;

C部分：KEYFRAMES

資料來源：css-tricks.com

關鍵幀有助于在特定時間將動畫從一個更改為另一個。

可以通過兩種方式使用關鍵幀：

從…到…
百分比方法

1.從…到…

在這種方法中，動畫期間只有2個狀態 - 開始狀態和結束狀態。

句法：

@keyframes animation_name {
 from { }
 to { }
}

使元素（例如，Car）動畫化以從其初始位置水平移動：

@keyframes drive{
from {
transform: translateX(-200);
}
to {
transform: translateX(1000px);
 }
}
.car{
animation-name: drive;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
animation-direction: normal;
}

2.百分比方法

我們不能在@keyframes中使用from-to，因為現在有超過1個狀態。百分比方法將動畫分解為各種中間狀態，包括開始和結束狀態。起始狀態用0％表示，結束狀態用100％表示?？梢杂卸嗌僦虚g狀態，但建議在整個過程中保持狀態的隔離。

示例：0% — 25% — 50% — 75% — 100%

@keyframes jump{
0% { transform: translateY(-50px) }
50% { transform: translateY(-100px) }
100% { transform: translateY(-50px) }
}

?動畫速記

也可以使用這種簡潔的格式來編寫動畫：

animation: (animation-name) (animation-duration) (animation-fill-mode) (animation-timing-function) (animation-iteration-count) (animation-direction) (animation-delay);

注意：動畫延遲將始終在動畫持續時間之后出現。除了它們 - 時間導向的功能和其他屬性的順序無關緊要。

例：

.car{
animation-name: drive;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
animation-direction: normal;
}
Can be re-written as:
.car{
animation: drive 3s ease-in infinite normal 2s;
}

我們希望在“car”元素上添加兩個動畫 - 驅動和跳轉。我們可以通過使用“鏈接動畫”和單行代碼完成此操作。

?什么是鏈接動畫？

使用CSS輕松播放多個動畫。逗號分離技術可用于鏈接動畫并運行一個動畫。例如，

···

.car{

animation: drive 3s ease-in infinite normal 2s, jump 2s ease 4 alternate reverse;

}

···

動畫屬性分類：

使用哪種動畫？
animation-name：動畫的，由名稱@keyframes之后的關鍵字指示
動畫結束時該怎么辦？
animation-fill-mode：告訴如何處理動畫窗口外部動畫的元素。
如果您希望重復動畫“n”次，請使用，
animation-iteration-count：重復動畫。它可以具有數字值，或者如果您希望動畫連續播放，則使用“無限”。
如果您想要反轉動畫的方向
animation-direction：您不需要一起編寫單獨的動畫來反轉動畫。你可以應用它來播放當前動畫，它的方向。

In From – To Approach:
reverse: to - from
alternate: from-to -> to-from -> from-to
alternate-reverse: to-from -> from-to -> to-from
In Percentage Approach
reverse: 100% - 0%
alternate: 0% - 100% -> 100% - 0% -> 0% - 100%
alternate-reverse: 100% - 0% ->0% - 100% ->100% - 0%

動畫定時功能，控制動畫開始，行為和結束的速度。有一些內置值，如ease，ease-in，你可以使用cubic-bezier（n，n，n，n）編寫自己的值。在這玩吧。
延遲CSS動畫也可以 使用動畫延遲將在事件被觸發后幾秒/毫秒啟動動畫。

結論

一開始習慣CSS可能有點復雜。但是一旦你習慣了，你就會發現CSS動畫和變換非常奇妙。

謝謝閱讀。我們希望這篇文章能幫到你。如果確實如此，請大家豎起大拇指，如果您有任何疑問，請隨時放棄您的意見。此外，如果您想要分享您想要分享的CSS變換或動畫的令人興奮的用途，我們很樂意聽取您的意見。

翻譯自：https://medium.com/engineerbabu/a-detailed-guide-to-css-animations-and-transitions-b544502c089c

在線咨詢

上一篇：HTML的表格與列表、塊及類與ID
下一篇：手把手，?教你如何逐步提高JavaScript的編碼能力？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Github上流行的CSS3動畫效果庫，你有沒有嘗試過-animate.css

紹

Github

安裝使用

總結

. CSS 動畫有哪些? transition過渡與animation動畫的區別是什么？

2. 首先介紹各個動畫的語法+屬性

2.1 transition 過渡

2.2 transform 變形

2.3 animation 關鍵幀動畫

3. 接下來是常見的面試題目以及實現代碼

3.1 transition 示例一

3.2 transition 示例二

3.3 transform 示例一

3.4 transform 示例二

3.4 A transform 示例三

3.6 animation 示例一

3.7 animation 示例二

A部分：Transforms

B部分：TRANSITIONS

C部分：KEYFRAMES

結論

您的項目需求

. CSS 動畫有哪些? transition過渡與animation動畫的區別是什么？