CSS3動畫實現3D倒數計時效果

大猿猴發表於2018-08-01

先介紹CSS3動畫如何使用？兩步即可搞定。

定義動畫規則

@keyframe animationName{  
     timeStamp{  
         attr1:value1;  
         attr2:value2;  
         ...
         attrn,valuen;  
     }  
 }
複製程式碼

說明：

animationName表示動畫名稱；
timeStamp表示時間點，可取值from，to或0-100%，from表示0，to表示100%；
每個時間點可以指定多個樣式屬性attr與對應值value。

元素應用動畫

 elemSelector{  
     animation: animationName animationDuration;   
 }
複製程式碼

說明：

elemSelector表示元素選擇器
執行一個動畫至少指定動畫名稱animationName和動畫時長animationDuration
animation屬性是以下屬性的簡寫形式，每個屬性的含義說明如下表，

屬性名稱	含義
animation-name	@keyframe動畫的名稱
animation-duration	動畫的時長，需指定單位如s或ms，預設值為0
animation-timing-function	動畫的速度曲線，預設值為ease，其他取值有ease-in、ease-out、ease-in-out、linear、step-start、step-end、貝塞爾曲線函式cubic-bezier、步進函式steps
animation-delay	動畫延時多久開始，需指定指定單位如s或ms，預設為0，，取正值表示延時，負值表示超前
animation-iteration-count	動畫播放次數，預設為1
animation-direction	動畫是否在下一週期逆向播放，預設是normal，其他取值有reverse、alternate、alternate-reverse
animation-play-state	動畫的播放狀態，是執行還是暫停，預設是running，其他取值有paused
animation-fill-mode	動畫執行前、後是否應用目標狀態，預設是none，其他取值有forwards、backwards、both

重點來了，一個倒數計時效果是如何實現的，先看效果。由於是壓縮生成的gif，所以看起來會很快。

下面對主要程式碼進行說明，

HTML部分

  <!--用於呈現數字-->
  <div id="number"></div>
  <!--用於重新倒數計時-->
  <button class="button">再來一次</button>
   <!--用於最後的聲音播放。-->
  <audio ></audio>
複製程式碼

CSS部分

  /*初始化數字div樣式*/
  #number {
      position: absolute;
      top: 50%;
      left: 50%;
  
      text-align: center;
  
      -webkit-transform: translate3d(-50%, -50%, 0);
      -moz-transform: translate3d(-50%, -50%, 0);
      transform: translate3d(-50%, -50%, 0);
  }
  
  /*繫結動畫*/
  .number-anim {
      -webkit-animation: animation_in 10s linear;
      -moz-animation: animation_in 10s linear;
      /*動畫時長是10s，且動畫的速度是線性的*/
      animation: animation_in 10s linear;
  }
  
  /*定義動畫規則*/
  @keyframes animation_in {
      0 {}
      10% {
          /*由於動畫時長是10s，此時是1s時刻,字型大小變為100px，z方向距離主螢幕為300px*/
          font-size: 100px;
          -webkit-transform: translate3d(-50%, -50%, -300px);
          -moz-transform: translate3d(-50%, -50%, -300px);
          transform: translate3d(-50%, -50%, -300px);
      }
      11% {
          /*隨後字型大小變為300px，z方向距離主螢幕為0，後面每到整秒數都會重複進行*/
          font-size: 300px;
          -webkit-transform: translate3d(-50%, -50%, 0);
          -moz-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
      }
      20% {
          font-size: 100px;
          -webkit-transform: translate3d(-50%, -50%, -300px);
          -moz-transform: translate3d(-50%, -50%, -300px);
          transform: translate3d(-50%, -50%, -300px);
      }
      21% {
          font-size: 300px;
          -webkit-transform: translate3d(-50%, -50%, 0);
          -moz-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
      }
      30% {
          font-size: 100px;
          -webkit-transform: translate3d(-50%, -50%, -300px);
          -moz-transform: translate3d(-50%, -50%, -300px);
          transform: translate3d(-50%, -50%, -300px);
      }
      31% {
          font-size: 300px;
          -webkit-transform: translate3d(-50%, -50%, 0);
          -moz-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
      }
      40% {
          font-size: 100px;
          -webkit-transform: translate3d(-50%, -50%, -300px);
          -moz-transform: translate3d(-50%, -50%, -300px);
          transform: translate3d(-50%, -50%, -300px);
      }
      41% {
          font-size: 300px;
          -webkit-transform: translate3d(-50%, -50%, 0);
          -moz-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
      }
      50% {
          font-size: 100px;
          -webkit-transform: translate3d(-50%, -50%, -300px);
          -moz-transform: translate3d(-50%, -50%, -300px);
          transform: translate3d(-50%, -50%, -300px);
      }
      51% {
          font-size: 300px;
          -webkit-transform: translate3d(-50%, -50%, 0);
          -moz-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
      }
      60% {
          font-size: 100px;
          -webkit-transform: translate3d(-50%, -50%, -300px);
          -moz-transform: translate3d(-50%, -50%, -300px);
          transform: translate3d(-50%, -50%, -300px);
      }
      61% {
          font-size: 300px;
          -webkit-transform: translate3d(-50%, -50%, 0);
          -moz-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
      }
      70% {
          font-size: 100px;
          -webkit-transform: translate3d(-50%, -50%, -300px);
          -moz-transform: translate3d(-50%, -50%, -300px);
          transform: translate3d(-50%, -50%, -300px);
      }
      71% {
          font-size: 300px;
          -webkit-transform: translate3d(-50%, -50%, 0);
          -moz-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
      }
      80% {
          font-size: 100px;
          -webkit-transform: translate3d(-50%, -50%, -300px);
          -moz-transform: translate3d(-50%, -50%, -300px);
          transform: translate3d(-50%, -50%, -300px);
      }
      81% {
          font-size: 300px;
          -webkit-transform: translate3d(-50%, -50%, 0);
          -moz-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
      }
      90% {
          font-size: 100px;
          -webkit-transform: translate3d(-50%, -50%, -300px);
          -moz-transform: translate3d(-50%, -50%, -300px);
          transform: translate3d(-50%, -50%, -300px);
      }
      91% {
          font-size: 300px;
          -webkit-transform: translate3d(-50%, -50%, 0);
          -moz-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
      }
      100% {
          font-size: 100px;
          -webkit-transform: translate3d(-50%, -50%, -300px);
          -moz-transform: translate3d(-50%, -50%, -300px);
          transform: translate3d(-50%, -50%, -300px);
      }
   }
複製程式碼

JS部分

window.onload = function() {
  
  //第一步：定義全域性變數
  num = 10;//數字內容
  isCounting = true;//是否正在計數
  timer = null;//定時器
  numberDiv = document.querySelector("#number");
  audio = document.querySelector("audio");
  button = document.querySelector(".button");

  //第二步：初始化
  init();

  //第三步：開始倒數計時
  timer = setInterval(count, 1000);
    
}
複製程式碼

初始化函式宣告如下，

   function init() {
      numberDiv.innerHTML = num;
      numberDiv.style.color =  getRandomColor();
      numberDiv.style.fontSize = "300px";
      numberDiv.className = "number-anim";
    
      button.addEventListener("click", function() {
          if (isCounting) {
              return;
          }
          isCounting = true;
          num = 10;
  
          numberDiv.innerHTML = num;
          numberDiv.style.color = getRandomColor();   
          numberDiv.style.fontSize = "300px";
          
          //先解綁，再使用setTimeout使瀏覽器重新渲染頁面，重新繫結
          //setTimeout只是一種方式，只要能使瀏覽器重新渲染即可      
          numberDiv.className = null;
          setTimeout(function() {
              numberDiv.className = "number-anim";
  
              timer = setInterval(count, 1000);
          }, 30); 
      }, false);
  }
複製程式碼

倒計數函式宣告如下，

  function count() {
  
      numberDiv.innerHTML = --num;
      numberDiv.style.color = getRandomColor();
    
      if (num == 0) {
          clearInterval(timer);
  
          audio.src="./audio/readygo.mp3";
          audio.play();
  
          numberDiv.innerHTML = "Ready Go!";
          numberDiv.style.color = getRandomColor();
          numberDiv.style.fontSize = "100px";
  
          numberDiv.style.opacity = 0.8;
          numberDiv.style.filter = "alpha(opacity=80)";
          CompatibleFunc(numberDiv, "Transition", "opacity 1s");
  
          isCounting = false;
      }
  }
複製程式碼

這裡有一個地方需要特別注意，避免以後踩坑。

關於動畫樣式的解綁與繫結。

動畫樣式animation一執行結束，就不再起作用了，要使其重新生效，需要重新繫結。我試了4種方式。

第一種是直接解綁，然後再繫結。

  numberDiv.className = null;
  numberDiv.className = "number-anim";
複製程式碼

結果是不能使動畫重新生效。

第二種是使用classlist屬性進行解繫結。
```
  numberDiv.classList.toggle("number-anim");
  numberDiv.classList.toggle("number-anim");
複製程式碼
```
classList返回類名列表物件，呼叫toggle方法，若類名存在則刪除，返回false，若類名不存在則新增，返回true，所以要呼叫兩次，第一次刪除類名，第二次新增類名。但是結果依然是不能使動畫重新生效。

第三種是開啟定時器。

先解綁，再利用定時器使瀏覽器重新渲染頁面，重新繫結。setTimeout只是一種方式，只要能使瀏覽器重新渲染即可，最終動畫重新生效。

  numberDiv.className = null;
  setTimeout(function() {
      numberDiv.className = "number-anim";
  }, 30); 
複製程式碼

在mozilla官方文件介紹了另一種重新渲染方式，

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Tips
複製程式碼

應用在這裡的話，寫法是，

  numberDiv.className = null;
  window.requestAnimationFrame(function(){
      window.requestAnimationFrame(function(){
          numberDiv.className = "number-anim";
      });
  });
複製程式碼

第四種是藉助其他重新渲染途徑，如顏色、內容、大小的變化。
```
  numberDiv.className = null;

  numberDiv.innerHTML = num;
  numberDiv.style.color = getRandomColor();   
  numberDiv.style.fontSize = "300px";
  
  numberDiv.className = "number-anim";
複製程式碼
```
結果IE和Microsoft Edge 瀏覽器是支援的，但是FireFox和Chrome不支援，但這是不是也說明了Chrome和FireFox已經對瀏覽器渲染做了優化？

簡而言之，要使動畫重新生效，需要觸發瀏覽器重新渲染。
好了，附上原始碼連結。

https://github.com/muzhidong/frontend-demo/tree/master/countdown
複製程式碼

動畫合成小技巧！CSS 實現動感的倒數計時效果
2022-07-11
動畫CSS
CSS3實現王者匹配時的粒子動畫效果
2019-04-09
CSSS3動畫
css3實現動畫閃爍效果
2019-12-27
CSSS3動畫
Android View篇之啟動頁倒數計時動畫的實現
2019-05-08
AndroidView動畫
js實現活動倒數計時
2018-05-30
JS
直播系統平臺搭建，大屏倒數計時動畫效果
2021-10-15
動畫
Axure之倒數計時效果
2018-03-22
PPT 倒數計時時鐘，用 GIF 動畫實現，可直接使用 -- 附 Python 實現程式碼
2021-02-09
動畫Python
CSS3實現3D魔方效果
2019-03-06
CSSS33D
CSS3實現3D翻牌效果
2018-06-07
CSSS33D
jQuery 倒數計時效果詳解
2018-11-28
jQuery
CSS3實現3d效果照片牆
2020-12-26
CSSS33D
Flutter倒數計時/計時器的實現
2019-04-10
Flutter
js實現指定時間倒數計時
2020-09-27
JS
css3動畫實現數字動態增加
2024-07-01
CSSS3動畫
使用css3實現小車行駛的動畫效果
2024-12-10
CSSS3動畫
ReactiveCocoa 實現按鈕倒數計時
2018-11-17
React
jquery實現60秒倒數計時
2018-08-21
jQuery
CSS3中用background-image實現粒子動畫效果
2021-09-09
CSSS3動畫
UI設計師福利之CSS3實現的任意圖片lowpoly動畫效果
2019-03-01
UICSSS3動畫
JavaScript 前端倒數計時糾偏實現
2019-03-04
JavaScript前端
css3帶你實現3D轉換效果
2022-03-01
CSSS33D
CSS3動畫按鈕效果
2018-07-04
CSSS3動畫
CSS3實現流星動畫
2018-03-19
CSSS3動畫
css3動畫效果抖動解決
2018-08-29
CSSS3動畫
css3實現顫動的動畫
2019-02-16
CSSS3動畫
Jquery 實現頁面倒數計時的功能
2020-11-18
jQuery
js自動倒數計時程式碼，倒數計時完畢時自動停止迴圈
2024-07-19
JS
CSS3 loadding載入動畫效果
2018-05-27
CSSS3動畫
CSS3載入等待動畫效果
2018-07-23
CSSS3動畫
css3動畫完成打字機效果
2020-12-25
CSSS3動畫
css3實現逐幀動畫
2018-06-29
CSSS3動畫
css3實現ps蒙版效果以及動畫，炫酷吊炸天！
2018-12-25
CSSS3動畫
CSS3動畫效果下拉導航選單效果
2018-06-08
CSSS3動畫
CSS3多面體3D運動效果
2018-06-20
CSSS33D
CSS3圖片上下動畫浮動效果
2018-03-20
CSSS3動畫
商品搶購倒數計時效果程式碼例項
2018-07-09
Js Jquery 實現的按鈕倒數計時整理
2019-05-11
JSjQuery

CSS3動畫實現3D倒數計時效果

關於動畫樣式的解綁與繫結。

相關文章