CSS倒计时动画制作教程

今天golang学习网给大家带来了《CSS倒计时效果制作教程：animation与transform应用》，其中涉及到的知识点包括等等，无论你是小白还是老手，都适合看一看哦~有好的建议也欢迎大家在评论留言，若是看完有所收获，也希望大家能多多点赞支持呀！一起加油学习~

使用@keyframes定义缩放动画，通过animation-delay控制延迟，使3、2、1依次放大后消失，实现倒计时效果。

要制作一个简单的倒计时效果，可以使用 CSS 的 @keyframes 和 transform 属性配合实现动画。这种做法适合在静态页面或初级项目中展示动态的数字变化或进度感，比如模拟秒表、倒数转场等视觉效果。

1. 使用 @keyframes 定义动画流程

通过 @keyframes 可以定义动画的关键帧，控制元素在不同时间点的状态。例如，让一个数字从放大到缩小，模拟“跳动”消失的效果。

@keyframes countdown {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

这个动画从正常大小放大到 1.2 倍，再缩小到完全消失，配合透明度变化，产生一种“弹出后消失”的视觉效果。

2. 应用 animation 到数字容器

将上述动画绑定到显示数字的元素上，并设置持续时间和播放次数。假设你有三个 span 分别代表 3、2、1 的倒计时：

.countdown-number {
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 32px;
  font-weight: bold;
  background: #ff4500;
  color: white;
  border-radius: 50%;
  margin: 10px;
  animation: countdown 1s ease-in-out;
}

每个数字出现时都会执行一次缩放消失动画。为了让它们依次播放，可使用 animation-delay 控制延迟。

3. 控制多个数字依次动画

给每个数字设置不同的延迟时间，实现逐个倒数的效果：

#num-3 { animation-delay: 0s; }
#num-2 { animation-delay: 1s; }
#num-1 { animation-delay: 2s; }

这样第一个数字立刻开始动画，第二个在 1 秒后，第三个在 2 秒后，形成 3→2→1 的倒计时节奏。

4. HTML 结构示例

结合以上样式，HTML 可以这样写：

<div class="countdown">
  <span class="countdown-number" id="num-3">3</span>
  <span class="countdown-number" id="num-2">2</span>
  <span class="countdown-number" id="num-1">1</span>
</div>

页面加载后，三个数字会依次放大并消失，完成倒计时动画。

基本上就这些。利用 transform 实现形变，配合 animation 控制播放时机，就能做出简洁有力的倒计时视觉效果，适合新手练习动画逻辑和时间控制。

今天关于《CSS倒计时动画制作教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于CSS,倒计时的内容请关注golang学习网公众号！