本文档始于2025.12.10 凌晨0:02 该睡觉啦

CSS动画入门：KeyFrames关键帧动画

1.核心概念

为什么我们需要animation呢？
因为transition是被动的，一定需要用户来触发，而且他只有A→B两个状态
Animation是主动的，可以自动播放，可以有各种关键帧，相当于无数个状态
核心概念都有：
@keyframes 可以定义定花在不同时间节点（关键帧）的样子
animation 把keyframes定义的动画赋值到animation上面，还可以控制这个动画的时长、次数、播放速度曲线、是否循环、结束了怎么办之类的

2.解决了什么问题

如上，解决了transtion不能主动触发的缺点，以及更高精度的写出精美的动态效果

3.代码示例

一些关键属性：

animation-iteration-count:  
infinite(无限循环)或者数字

animation-direction:  
normal: 0% -> 100% (默认)
alternate: 0% -> 100% -> 0%... (往返跑，呼吸灯必备)

animation-delay:字面意思，延后

animation-fill-mode:常用的是forwards(动画结束后停留在最后一帧)

一些速度曲线:ease/linear steps(N) step-end

以上是一些属性和他们的常用值，不止这些，但是如果还需要别的请查阅5.相关链接
以下是一个自己写的小打字机效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>打字机效果</title>
    <style>
        /* 居中显示，方便观察 */
        body {
            /* 错误点1：要设置高度为100%视口高度 */
            height: 100vh;
            background-color: rgb(29, 29, 29);
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
        }
        
        .typing-effect {
            font-family: 'Courier New', monospace;
            width: 17ch;
            font-size: 32px;

            /* 裁掉多余部分，以及强制不换行，这俩别忘了，抄的代码也要好好记 */
            overflow: hidden;
            white-space: nowrap;

            /* 初始光标，别忘了写这个 */
            border-right: 3px solid green;

            animation: 
                /* 错误点2，两个不同动画需要加逗号 */
                word 3s steps(17) infinite alternate,
                blink 0.5s step-end infinite alternate;
                /* 错误点3，需要加上step-end才能实现瞬间变化 */
        }

        /* 打字初始状态 */
        @keyframes word {
            0% { width: 0; }
        }

        /* 闪烁效果 */
        @keyframes blink {
            /* 错误点4：调整什么就细节单独写出来 */
            50% {border-color: transparent;}
        }
    </style>
</head>
<body>
    <div class="typing-effect">System Hacked...</div>
</body>
</html>

实现关键要素：
1.等宽字体(monospace)、ch单位、steps(N)
2.white-space: nowrap与overflow: hidden

以上两个分别是 1.强制文字不许换行 2.不显示宽度以外的内容，需要这两个属性更多的值和用法请查看 5.相关链接

4.注意事项/常见误区

在 alternate 往返动画中，可以将 steps 和 width 多设 1 个单位（如 17ch），利用这个“空帧”制造自然的停顿感。
逗号警告：animation 里写多个动画（如打字+光标）时，中间必须用逗号隔开
布局高度：想让元素垂直居中，父容器（如 body）必须有高度 (height: 100vh)
语法顺序：简写时，第一个时间是 duration，第二个时间是 delay

5.相关链接

MDN文档
使用 CSS 动画
 white-space
overflow

菜鸟教程
CSS3 动画
 CSS white-space 属性
 CSS overflow 属性

6.本次学习总结

这关就是我html+css生涯的最后一关，接下来要进入的是真正的编程世界，感谢deepseek带我入门，感谢gemini带我深入学习+找到学习方式，惊喜的文档更加让我心旷神怡，再次感谢我的朋友，是他在我迷茫的时候给我指了初步的方向，最后还有我自己，虽然学的慢吞吞但是终究还是学下来了，接下来就要学更加困难的内容了，继续加油！！！
HTML基础 ✅ 已完成
📦 CSS盒模型 ✅ 已完成
🎯 CSS选择器 ✅ 已完成
📍 CSS定位系统 ✅ 已完成
🔀 Flexbox弹性布局 ✅ 已完成
📊 Grid网格布局 ✅ 已完成
🎨 Transform与Transition ✅ 已完成
📱 响应式设计 ✅ 已完成
⚡ CSS动画 ✅ 已完成
🛠️ 浮动与历史布局 ✅ 已完成