LocalTools离线浏览器工具合集

分类: 开发工具

CSS 关键帧生成器

站方自主规划没找到想要的工具？

选择一个动画预设并复制 @keyframes 代码块

选择淡入、滑入、弹跳、脉冲或旋转预设，设置时长、缓动函数、重复次数和方向，即可复制完整的 @keyframes 代码块，以及使用它的 animation 简写属性，并提供实时预览。

输出
@keyframes localtools-preview {
  from {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-24px);
  }

  60% {
    transform: translateY(0);
  }

  80% {
    transform: translateY(-12px);
  }

  to {
    transform: translateY(0);
  }
}

.element {
  animation: localtools-preview 1.2s ease-in-out infinite normal;
}

每次切换预设时，预览都会使用下方展示的确切 CSS 重新播放。

本页的所有处理都在浏览器中完成，不会上传任何内容。

这个工具能做什么

手写一个 @keyframes 代码块，意味着要为每个百分比节点命名，并让各节点上的属性值按你预期的方式插值，对于像带有多个节点的弹跳动画这类效果，很容易在细节上出错。本工具内置了几种常见的动画形态作为现成的节点列表，并让你可以调整那些不会改变关键帧本身的时序参数，因此预览效果始终与下方展示的 CSS 代码块完全一致。

使用方法

  1. 选择一个动画预设。
  2. 设置时长、缓动函数、重复次数和方向。
  3. 复制 @keyframes 代码块，以及下方的 animation 简写属性。

隐私说明

本工具完全在你的浏览器中运行。输入的内容不会被上传、保存或分享，关闭标签页即随之消失。

常见问题

为什么切换预设时预览会重新开始？
切换预设会替换底层的 @keyframes 节点，因此预览元素会被重新挂载，以确保正在播放的动画对应的是刚生成的那一份，而不是把旧动画播完。
重复次数设为“infinite”会怎样？
它会让动画无限重复播放，这也是预览默认使用的设置；如果希望动画只播放固定次数后停止，可以改为设置一个具体数字。
会向服务器发送内容吗？
不会。@keyframes 代码块和 animation 简写属性都是在页面内根据你选择的预设和时序参数生成的，这也是预览能即时更新的原因。

返回全部工具