CSS3動畫可謂是前端開發大勢所趨，其中數字增加的動畫效果也是很常用的，比如網站的計數器、一個數字逐漸增加的效果。下面我們使用CSS3動畫制作一個數字增加的效果。
/* CSS部分 */
.num {
font-size: 48px;
color: #333333;
}
/* 定義動畫 */
@keyframes count {
from {
transform: scaleX(0); /* 水平縮放 */
}
to {
transform: scaleX(1);
}
}
/* 加入動畫 */
.num-animation {
animation: count 1s ease-in-out forwards;
/* 1s為動畫時間，ease-in-out為動畫速度曲線，forwards為保留最后一幀的狀態 */
}
/* HTML部分 */數字：0
在上面的代碼中，我們首先定義了數字的樣式，在動畫部分，我們使用CSS3中的@keyframes來定義動畫過程。在這里，我們使用transform屬性進行動畫（水平縮放），并通過from和to來定義狀態。在.num-animation中添加animation屬性，將定義好的動畫加入數字中即可實現數字增加的動畫效果。
上一篇css3 動畫 酷炫顯示
下一篇css3 動畫保持