使用@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 控制延迟。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
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 控制播放时机，就能做出简洁有力的倒计时视觉效果，适合新手练习动画逻辑和时间控制。
