Softonic

CSS Keyframes 生成器

步 1 / 2
结果

@keyframes 规则定义动画的里程碑：元素在开始、中间和结束时分别是什么样子。这个生成器为四种常见运动写出规则：淡入滑动、脉冲、旋转和弹跳。给动画起个名字，设置时长，对于滑动和弹跳预设再指定以像素为单位的移动距离。输出是 animation 简写加上 @keyframes 代码块，可直接粘贴到样式表中。

如何生成 keyframes

  1. 1

    选择动画类型

    淡入滑动、脉冲、旋转或弹跳。每个预设都带有现成的帧。

  2. 2

    给动画命名

    使用 `fade-slide` 这样的小写连字符（kebab-case）名称，稍后在 `animation` 简写中使用。

  3. 3

    设置时长

    以秒为单位，例如快速过渡用 0.6。

  4. 4

    设置距离（滑动和弹跳）

    以像素为单位的移动距离，用于垂直运动。

  5. 5

    复制 CSS

    把简写和 `@keyframes` 代码块放进样式表即可。

四种预设

淡入滑动

.animated {
  animation: fade-slide 0.6s ease both;
}

@keyframes fade-slide {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

元素从下方滑入并淡出显示。

脉冲

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.05); opacity: .8; }
}

轻柔的呼吸感效果，适合通知圆点和徽章。

旋转

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

完整旋转一圈，适合加载器和图标。

弹跳

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-24px); }
}

元素向上弹起再落下。

为什么是 transform 和 opacity？

浏览器在 GPU 上合成 transform 和 opacity，无需重新计算布局或重绘，因此动画保持流畅。预设刻意避免会触发布局计算的属性。

animation 简写

animation: fade-slide 0.6s ease both; 的含义是：名为 fade-slide 的动画，时长 0.6 秒，使用默认的 ease 缓动。填充模式 both 在动画开始前应用起始状态、结束后保持结束状态，避免元素在动画前闪烁或在动画后突然回弹。

命名约定

  • 使用小写连字符（kebab-case），符合 CSS 惯例。
  • 描述运动而不是元素：fade-in-up 比 alert-appear 更好。
  • 避免可能与第三方库冲突的名称。

浏览器支持

@keyframes 是通用功能，IE 10 以来的所有浏览器都支持。

常见问题

卡片、横幅或对话框等进入页面的内容用淡入滑动。需要突出的通知点、徽章和按钮用脉冲。加载器和进度图标用旋转。行动号召箭头这类俏皮强调用弹跳。

距离是滑动和弹跳预设中按像素计的垂直移动量：淡入滑动动画从下方 24px 处开始滑入，弹跳向上跳 24px 再落下。旋转预设不使用距离。

可以，输出是纯 CSS。把 ease 换成任何缓动关键字或 cubic-bezier(...) 值，再在 @keyframes 代码块中加入 25% 或 75% 等中间百分比，即可进一步塑造运动。

因为框架重新渲染可能重新应用类名并重新启动动画。使用 animation-fill-mode: both（输出中已包含）保持结束状态，或者把动画触发器从被重新渲染的元素上分离。

相关工具

ASCII 表参考

完整 ASCII 表，覆盖 0 到 127；列出每个代码的十进制、十六进制、八进制、二进制值和 HTML 数字字符引用写法，包括 NUL、LF、DEL。

HTML 字符参考

可搜索的 HTML 实体列表，含命名代码与数值代码，并支持一键复制特殊字符和符号。

键盘快捷键参考

搜索 macOS、Windows 和 Linux 上 VS Code、Chrome 以及使用 GNU Readline 的 Bash 的文档默认快捷键。

电话号码验证器

根据各国号码规划检查结构，并显示地区、类型以及E.164、国际、国内和RFC 3966格式。

变更日志生成器

根据分类条目生成 Keep a Changelog 风格的 Markdown 部分。将条目粘贴到 Added、Changed、Fixed 和 Removed 下，选择 Markdown 或纯文本，然后复制输出。

cURL 命令生成器

根据 HTTP URL、请求头、认证、JSON、原始数据或表单字段，在浏览器中私密生成适用于 POSIX Shell 或 PowerShell 的 cURL 命令。

此工具还提供其他语言版本