純 CSS 實現計時器效果詳情 - 前端,css,動畫南城FE 動態日志

本文翻譯自 How to Make a CSS Timer，作者：PREETHI SAM，略有刪改。

有時候我們需要再網站中使用計時器。比如下單購物成功後增加倒計時回到首頁；或者一些時間管理工具（番茄工作法），當遇到這些情況時，我會毫不猶豫地使用JavaScript，因為它可能是處理這類事情的更強大的工具。

然而在某些場景下 CSS 替代品也同樣有趣和高效。現在的電子郵件客户端具有很強的 CSS 能力，但卻永遠無法運行 JavaScript，因此這種情況或許可以成為一種有趣的增強功能。

讓我們來看看如何製作一個CSS定時器。我們會用一些現代的CSS技術來做。主要需要用到以下CSS能力：

CSS Counters
@property
偽元素
@keyframes

下圖是我們要實現的演示效果，鼠標移入開啓倒計時：

我們的CSS定時器主要有三個要求：

一個能從5減到0的數
一種計時五秒的方法，並在每一秒中遞減數字
一種在頁面上顯示遞減數字的方法

數量

對於我們的第一個需求，一個可更新的數字，我們使用 @property 創建一個自定義屬性，該屬性將保存一個 <integer> 類型的值。

注意：integer 可以是零，也可以是正整數或負整數。如果你想要小數點的數字，使用 number，它會保存一個真實的數字。

@property --n {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

計數

對於秒數變化減少數字的效果，我們使用@keyframes動畫實現。

.timer:hover::after {
  animation: 5s linear count;
}

@keyframes count {
  from { --n: 5; }
  to   { --n: 0; }
}

當我們為特定的值類型註冊一個自定義屬性時，例如<integer>、<percentage>或<color>，瀏覽器知道該屬性是為處理該特定類型的值而創建的。所以瀏覽器可以自信地在未來更新自定義屬性的值，在動畫中也是如此。

這就是為什麼我們的屬性--n可以在動畫中從5到0，並且由於動畫設置為5秒，因此實際上是在5秒的時間內從5到0的計數。於是計時器上場了。

現在還有一個問題就是如何將計數的數字展示到頁面上。這裏將動畫分配給了一個偽元素，你可能已經想到使用偽元素的 content。

顯示

CSS屬性content可以顯示我們自己尚未添加到HTML中的內容。我們通常將此屬性用於各種用途，因為它接受各種值：圖像，字符串，計數器，引號，甚至屬性值。不過它不能直接接受數字。因此我們將通過計數器傳入數字 --n。

計數器可以通過 counter-reset 或 counter-increment 進行設置。我們將使用 counter-reset。這個屬性的值是一個計數器名稱和一個整數。由於 counter-reset 尚不能正確處理作為整數的 CSS 變量或自定義屬性，但可以接受 calc()，因此 calc() 函數成為我們的關鍵實現，我們將通過它傳遞 –-n。

.timer:hover::after {
  animation: 5s linear count;
  animation-fill-mode: forwards; 
  counter-reset: n calc(0 + var(--n));
  content: counter(n);
}

我們的動畫數字--n首先被傳遞到 calc()
calc()然後被傳遞到counter()
counter()依次傳遞給content，最後在頁面上呈現--n。

剩下的由瀏覽器來處理。它知道--n是一個整數。瀏覽器會在5秒內將此整數從5更改為0。

在動畫結束時使用animation-fill-mode: forwards屬性防止計時器立即恢復到初始的--n值0。

在設計方面，你可以進行遞增或遞減，或者改變其外觀，或者你也可以將其與其他典型的加載器或進度條設計結合起來。

CSS 自定義屬性也可以在 JavaScript 中設置和更新。因此，如果你希望在某個時候能夠在 JavaScript 中更新這些屬性，就像更新其他 CSS 屬性一樣，你可以使用 setProperty() 函數來實現。如果你想在 JavaScript 中創建一個新的自定義屬性，可以使用 registerProperty() 函數。相反地如果你希望讓 JavaScript 知道 CSS 動畫已經完成，你可以監聽 animationend 事件。