Loading...
Loading...
做 CSS 关键帧动画,带实时循环预览。
CSS 关键帧动画很强但啰嗦,你得写一段 @keyframes,再去摆弄那些时间属性。这个工具给了十几种现成动画和实时控件,让你看着动作循环,几秒钟复制完整 CSS。
选一种动画,淡入、滑动、缩放、脉冲、弹跳、旋转、抖动、翻转、漂浮、摇摆或橡皮筋,再设时长、延迟、缓动、次数、方向和填充模式。改任何项预览都会动,重播按钮可随时重启。输出包含对应的 @keyframes 块和加在示例选择器上的 animation 简写,直接粘贴即可。一切都在本地运行,不上传。
淡入、滑动、缩放、脉冲、弹跳、旋转、抖动、翻转、漂浮、摇摆和橡皮筋。
元素实时播放,配重播按钮可重启。
时长、延迟、缓动、次数、方向和填充模式。
输出同时有 @keyframes 块和 animation 简写。
永久循环,或设定精确的播放次数。
不上传;动画是设备上运行的真实 CSS。
做入场动画时,把填充模式设为 forwards,元素就会停在最终状态,而不是弹回去。
从这排里选一种动画。
设置时长、延迟和缓动。
选次数、方向和填充模式。
把 @keyframes 和 animation CSS 复制进你的样式表。
元素出现时淡入或滑入。
让按钮或徽标脉冲、抖动或弹跳来吸引视线。
让装饰元素无限旋转或漂浮。
动手写前先看清每个属性怎么改变动作。
关键帧主体定义一次,以带前缀的名字注入供预览使用,而可复制的输出用干净的名字;切换选择会重挂预览,让动画重新开始。
无账号、无网络请求;动画完全在你的浏览器里运行。
transform 和 opacity 动画对 GPU 友好,所以循环时预览也保持流畅。