@keyframes用于定义动画关键帧，通过animation属性应用到元素，控制样式变化过程。
在CSS中，@keyframes 用于定义动画的关键帧，控制元素在动画过程中的样式变化。通过它，你可以精确设定某个时间点上元素的样式状态，浏览器会自动补全中间过渡效果。
定义关键帧动画
使用 @keyframes 后跟一个自定义的动画名称，然后在大括号中设置不同阶段的样式：
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
也可以用百分比来更灵活地控制过程：
@keyframes fadeIn {
0% {
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
应用动画到元素
定义好动画后，使用 animation 属性将动画绑定到目标元素上：
立即学习“前端免费学习笔记（深入）”；
AutoIt3 中文帮助文档打包
下载
AutoIt v3 版本, 这是一个使用类似 BASIC 脚本语言的免费软件, 它设计用于 Windows GUI(图形用户界面)中进行自动化操作. 利用模拟键盘按键, 鼠标移动和窗口/控件的组合来实现自动化任务. 而这是其它语言不可能做到或无可靠方法实现的(比如VBScript和SendKeys). AutoIt 非常小巧, 完全运行在所有windows操作系统上.(thesnow注:现在已经不再支持win 9x,微软连XP都能放弃, 何况一个win 9x支持), 并且不需要任何运行库. AutoIt
.animated-box {
animation: slideIn 2s ease-in-out 0.5s forwards;
}
其中参数依次为：
- 动画名称（如 slideIn）
- 持续时间（如 2s）
- 缓动函数（如 ease-in-out）
- 延迟时间（如 0.5s）
- 填充模式（如 forwards，保持最后一帧）
常用 animation 子属性
你也可以分开写各个动画属性，便于维护：
- animation-name: 指定 @keyframes 定义的动画名
- animation-duration: 动画持续时间
- animation-timing-function: 过渡曲线（如 linear、ease、cubic-bezier()）
- animation-delay: 延迟启动时间
- animation-iteration-count: 循环次数（可设数字或 infinite）
- animation-direction: 播放方向（normal、reverse、alternate）
- animation-fill-mode: 动画外时间的样式（如 backwards、forwards）
- animation-play-state: 控制运行与暂停（running、paused）
基本上就这些。只要定义好关键帧，再通过 animation 应用，就能实现丰富的视觉效果。注意命名不要冲突，动画性能也尽量避免过度使用高消耗属性（如 top/left，推荐用 transform 替代）。
