鄭州Web前端進(jìn)階教程之Vue中動畫效果實現(xiàn)方法

聯(lián)網(wǎng)更迭迅速，Web前端作為熱門編程語言也在不斷的更新升級，面對這樣的趨勢，你不學(xué)習(xí)就是在變相的倒退，距離高薪就會越來越遠(yuǎn)。為了能夠在激烈的職場競爭中保持主動權(quán)，很多人選擇學(xué)習(xí)進(jìn)階，接下來千鋒鄭州老師就給大家分享Vue中動畫效果的實現(xiàn)方法。

　　1、哪些元素/那些組件適合在那些條件下實現(xiàn)動畫效果?

條件渲染(使用v-if)：v-if是“真正的”條件渲染，因為它會確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)谋讳N毀和重建。包括3種指令用法：v-if=(true/false)/v-else/v-else-if=(true/false)

條件展示(使用v-show)：相比v-if，v-show簡單得多——元素始終被編譯并保留，只是簡單地基于CSS切換。簡單來說，v-if有更高的切換開銷，v-show有更高的初始化渲染開銷，所以需要頻繁的切換使用v-show，如果項目運(yùn)行時條件切換少，就用v-if。

動態(tài)組件：主要是使用keep-alive。動態(tài)切換掉的組件(非當(dāng)前顯示的組件)是被移除掉了，如果把切換出去的組件保留在內(nèi)存中，可以保留它的狀態(tài)或避免重新渲染。

組件根節(jié)點：每個元素都是一個節(jié)點，每段文字也是一個節(jié)點，甚至注釋也都是節(jié)點。一個節(jié)點就是頁面的一個部分。如果把頁面看成一顆倒著的樹，根實例就是根，可以理解為入口，組件們就是枝干。

2、Vue中動畫的實現(xiàn)方式有四種：CSS動畫、使用animate.css動畫庫、使用JS鉤子函數(shù)、使用velocity js動畫庫。今天的鄭州Web前端進(jìn)階教程主要講解CSS動畫，代碼如下：

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue被設(shè)計為可以自底向上逐層應(yīng)用。Vue的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，Vue也完全能夠為復(fù)雜的單頁應(yīng)用提供驅(qū)動。

如果你想了解更多Vue相關(guān)的知識點或者Web前端進(jìn)階教程資料，可以關(guān)注“千鋒鄭州校區(qū)”微信公眾號，定期發(fā)布技術(shù)文章和行業(yè)咨詢!

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

1. transition 過渡
2. transform 變形
3. animation 關(guān)鍵幀動畫

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

2.1 transition 過渡

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

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 屬性應(yīng)用過渡效果, 多個屬性用逗號隔開
     2. color : background-color, border-color, color, outline-color ;
     3. length : 真實的數(shù)字 如：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 : 離散步驟（整個數(shù)字）, 在真實的數(shù)字空間, 以及使用 floor()轉(zhuǎn)換為整數(shù)時發(fā)生 如: outline-offset,z-index
     5. number : 真實的（浮點型）數(shù)值, 如:zoom,opacity,font-weight
     6. rectangle : 通過x, y, width 和 height（轉(zhuǎn)為數(shù)值）變換，如: crop
     7. visibility : 離散步驟，在0到1數(shù)字范圍之內(nèi)，0表示“隱藏”，1表示完全“顯示”,如：visibility
     8. shadow : 作用于color, x, y 和 blur（模糊）屬性,如：text-shadow
     9. background-image : 通過每次停止時的位置和顏色進(jìn)行變化。它們必須有相同的類型（放射狀的或是線性的）和相同的停止數(shù)值以便執(zhí)行動畫。
   2. transition-duration
     1. transition-duration: time;
        1. 該屬性主要用來設(shè)置一個屬性過渡到另一個屬性所需的時間, 也就是從舊屬性過渡到新屬性花費(fèi)的時間長度, 俗稱持續(xù)時間
   3. transition-timing-function
     1. transition-timing-function: linear| ease| ease-in| ease-out| ease-in-out| cubic-bezier(n,n,n,n);
        1. 該屬性指的是過渡的 “緩動函數(shù)” 。 主要用來指定瀏覽器的過渡速度, 以及過渡期間的操作進(jìn)展情況, 解釋下:
        2. 注意: 值 cubic-bezier(n,n,n,n) 可以定義自己的值, 如 cubic-bezier(0.42,0,0.58,1)
   4. transition-delay
      1. 這個屬性沒什么說的了, 就是過渡效果開始前的延遲時間, 單位秒或者毫秒

2.2 transform 變形

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

2.3 animation 關(guān)鍵幀動畫

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

3. 接下來是常見的面試題目以及實現(xiàn)代碼

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實現(xiàn)示例 */
.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 設(shè)置動畫時, 需要配合 transition 來設(shè)置過渡時間*/
  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 - 設(shè)置變形</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 -- 經(jīng)典旋轉(zhuǎn)正方體</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');

  // 初始化(細(xì)節(jié)知識點: 如果這里不執(zhí)行初始化, 在頁面顯示的內(nèi)容會有一個閃屏的問題: 分針、時針、秒針，重疊在12點這個位置)
  initTime()
  // 執(zhí)行定時器
  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 屬性設(shè)置
    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 關(guān)鍵幀動畫</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>無限循環(huán)播放動畫效果</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 關(guān)鍵幀動畫</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>

展示效果如圖所示:

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

如果對大家有所幫助，可以點個關(guān)注、點個贊; 文章會持續(xù)打磨。

有什么想要了解的前端知識, 可以在評論區(qū)留言, 會及時分享所相關(guān)內(nèi)容。

大家推薦一個網(wǎng)站(css-loaders.com)，這個網(wǎng)站真的是特別好用，將來同學(xué)在開發(fā)項目的時候基本上都需要用到各種各樣的加載狀態(tài)，各種各樣的加載動畫。這個網(wǎng)站就提供了各種各樣的加載動畫，而且用起來超級簡單，就不可能不會用，特別簡單。

大家看到了嗎？這么一堆的加載中動畫就很方便，而且我告訴你怎么用。舉個例子，比如這個，大家看我喜歡想要哪個動畫，只需要把鼠標(biāo)放上去，有一個叫copy the CSS，把它的CSS樣式復(fù)制下來。

然后去干什么？找到代碼，這是一個空的文件，直接Ctrlv粘貼，它就能自動的把剛才所看中動畫的樣式給復(fù)制進(jìn)來了。對于頁面來說就只需要加一個div，這個div在這就加一個class，名字為loader的DIV，這樣一個加載中動畫就有了。

然后就直接打開看一下，大家會看到了嗎？這個動畫就有了，特別方便。想換成別的樣式的就隨便切換就行了。只要有DIV，將來想用什么動畫就直接copy它的CSS樣式，比如這個，再復(fù)制一下，點擊一下就行了。把之前的樣式刪掉，再粘進(jìn)來，剛才復(fù)制過來的，再粘貼，動畫也就出來了。

是不是特別的好用？而且這里面的動畫效果特別多，能夠讓網(wǎng)頁變得非常炫酷。這些足夠用了，真的是多的不能再多了，給我看的都眼花繚亂了。這樣一個鬧鐘的效果，什么樣的都有。而且做的很簡單，只需要替換掉CSS，有這樣一個div，效果就有了。

看到了嗎？各位，就這個網(wǎng)站的，必須收藏，真的好用。

在線咨詢

上一篇：css還有這種顏色寫法，學(xué)到了
下一篇：強(qiáng)固耐用，極速雷電，LaCie PSSD移動固態(tài)硬盤

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

鄭州Web前端進(jìn)階教程之Vue中動畫效果實現(xiàn)方法

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

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

2.1 transition 過渡

2.2 transform 變形

2.3 animation 關(guān)鍵幀動畫

3. 接下來是常見的面試題目以及實現(xiàn)代碼

3.1 transition 示例一

3.2 transition 示例二

3.3 transform 示例一

3.4 transform 示例二

3.4 A transform 示例三

3.6 animation 示例一

3.7 animation 示例二

您的項目需求