✨ CSS 动画生成器

快速生成 CSS 动画代码

动画类型

动画参数

持续时间

0.5s

缓动函数

重复次数

关键帧

0%scale(0.9)opacity: 0

100%scale(1)opacity: 1

动画预览

CSS 代码

.element {
  animation: fadeIn 0.5s ease-out 1 forwards;
}

@keyframes fadeIn {
  0% {
    transform: scale(0.9); opacity: 0
  }
  100% {
    transform: scale(1); opacity: 1
  }
}

使用方法

1. 将 CSS 代码复制到你的样式表

@keyframes 和 animation 属性

2. 在 HTML 元素上添加 class

<div className="element">

3. 或者直接应用 animation 属性

animation: fadeIn 0.5s ease-out forwards;