CSS动画生成器 - Keyframes可视化创建

CSS @keyframes define the stages of an animation by specifying style rules at various points (percentages) during the animation sequence. Each keyframe describes how the animated element should render at a given moment, and the browser interpolates between these states smoothly.

Copy the generated @keyframes code into your CSS file or <style> tag. Then apply it to any element using: animation: custom-anim 2s ease infinite; (adjust parameters as needed). You can also use the shorthand or individual animation properties like animation-name, animation-duration, etc.

Percentages represent the progress through the animation timeline. 0% is the start, 100% is the end. You can add intermediate keyframes at any percentage (e.g., 25%, 50%, 75%) to create multi-step animations. The browser automatically calculates the in-between states through interpolation.

Animatable properties include: transform (translate, scale, rotate, skew), opacity, color, background-color, width, height, margin, padding, border, box-shadow, filter, and many more. Properties like display cannot be animated. For best performance, stick to transform and opacity as they're GPU-accelerated.

The timing function controls the speed curve of the animation. Common values: ease (slow start, fast middle, slow end), linear (constant speed), ease-in (slow start), ease-out (slow end), ease-in-out (slow start and end). You can also use cubic-bezier() for custom curves like spring or bounce effects.

Set animation-iteration-count to "infinite" in the animation settings. This will make the animation repeat endlessly. You can also set a specific number (like 3) to limit repetitions, which is useful for entrance animations or one-time effects.

animation-fill-mode determines how the element looks before and after the animation. "forwards" retains the styles of the last keyframe after animation ends. "backwards" applies the first keyframe styles during the delay. "both" combines both effects. "none" (default) reverts to original styles.

CSS animations are generally more performant for simple transitions as they run on the GPU and don't block the main thread. They're also easier to implement. JavaScript animations (using requestAnimationFrame) offer more control for complex, interactive, or physics-based animations. For most UI animations, CSS is the recommended approach.