a11y.skipToMainContent
1

CSS 关键框架动画生成器

选择预设动画,调制时间,看它运行现场,同时复制@keyframes块和动画短手.

Animation

s
s

Preview

PLAY

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use Keyframes Animation Generator

  1. 点击已设定的动画, 如淡出、 弹出或旋转 .
  2. 设定持续时间,计时功能,延迟,迭代计数,方向和填充模式.
  3. 观看预览运行并按回放重取.
  4. 点击 CSS 来抓取 @ keyframes 块和动画短手 .

{姓名}是什么来着?

键框动画生成器创建现成的 CSS @keyframes 动画. 选择一个预设——淡入,放入,回弹,脉冲,摇动,自旋,翻转或缩放——并且各自自航键框块.

显示持续时间,计时功能(包括几个多拍的立方位贝子预设),延迟,迭代计数,方向和填充模式. 预览元素会立即运行您的动画, 并在每次更改时自动重放; 一个重放按钮会按要求使用强制回流重新触发它 。

该工具完全运行在您的浏览器中, 并输出完整的 < code-% keyframes 定义和匹配的 < code> animation 短手, 这样您就可以将一个完整的、工作动画直接粘入您的样式表 。

Advertisement

FAQ

@keyframes与动画属性有何区别?
@ keyframes 定义了动画期间的变化(从/到或百分比步数),而动画的快手则告诉一个元素,要使用哪个键框加上其持续时间,放松,延迟,计数和方向. 你都需要两个工作动画.
我要怎么让动画播放一次 还是永远循环?
将迭代数设定为单个运行的1等数字, 或者选中“ 无限” 来循环 。 此地图为生成的快手中的动画- 输入- 计数值 .

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

← Back to Developer Tools · All tags

Last updated:

Advertisement