CSS 动画生成器(keyframes)

选择一个动画模板,调整时长、节奏和重复次数,实时查看效果,然后复制完整的 @keyframes 代码。100% 本地处理 —— 不会向服务器发送任何数据。

示例:

动画

时长(秒)

节奏曲线

延迟(秒)

重复次数

CSS 代码

@keyframes fade-animation {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.mon-element {
  animation: fade-animation 1.2s ease-in-out 0s infinite;
}

工作原理

@keyframes 规则描述了一个元素在动画时长的不同百分比处的状态,而 animation 属性则将该序列与一个元素关联起来,并设定时长、节奏和重复次数。选择一个现成的模板(淡入淡出、弹跳、旋转等),调整参数,即可获取包含 @keyframes 规则和 animation 声明的最终代码。

如何将此动画应用到我自己的元素上?

将 @keyframes 规则原样复制到您的样式表中,然后将选择器 .mon-element 替换为您想要设置动画的 HTML 元素的类名或 ID。

应该选择哪种节奏曲线?

ease-in-out 适用于大多数界面动画,因为它平滑地开始和结束;linear 更适合连续旋转的动画(如加载指示器),而 ease-out 会产生一种利落的到达效果,常用于元素出现的场景。

代码的生成和预览完全在您的浏览器中完成,不与服务器建立任何连接。