CSS 动画生成器 使用预设效果和可自定义的时间创建 CSS 关键帧动画。

CSS 动画使用 animation 简写属性和 @keyframes 规则。animation 属性结合：animation-name（引用 @keyframes 规则）、animation-duration、animation-timing-function（ease、linear、ease-in、ease-out、ease-in-out 或自定义 cubic-bezier）、animation-delay、animation-iteration-count（数字或 infinite）、animation-direction（normal、reverse、alternate、alternate-reverse）、animation-fill-mode（none、forwards、backwards、both）和 animation-play-state（running、paused）。@keyframes 规则使用百分比（0% 到 100%）或 from/to 关键字定义动画阶段。为了提高性能，尽可能只对 transform 和 opacity 属性进行动画处理，因为这些可以被 GPU 加速。其他属性，如 width、height、margin 和 padding 会触发布局重新计算。使用 will-change 属性提示浏览器关于即将发生的动画。