CSS工具/CSS动画构建器
CSS动画构建器
使用交互式时间轴编辑器创建精彩的CSS关键帧动画
预览
Box
设置
1s
0s
预设
时间轴
关键帧位置 0%
关键帧位置 50%
关键帧位置 100%
CSS代码
Loading...CSS Animation Guide
Learn how to create engaging CSS animations
What is CSS Animation?
CSS animations allow you to animate transitions between CSS styles. Unlike transitions, animations can have multiple keyframes that define intermediate steps, giving you complete control over the animation sequence. Animations can run automatically, loop infinitely, and be controlled with JavaScript.
How to Use This Tool
- Configure animation settings like duration, timing, and iteration
- Add keyframes to define animation states at different points
- Adjust properties like opacity, scale, rotation at each keyframe
- Preview the animation and copy the generated CSS code
Pro Tips
- Use the 'alternate' direction for smooth back-and-forth animations
- Combine transforms (scale, rotate, translate) for complex effects
- Use 'forwards' fill mode to keep the final state after animation ends
Browser Support
CSS animations are fully supported in all modern browsers including Chrome, Firefox, Safari, and Edge. The @keyframes rule and animation properties have excellent cross-browser compatibility.
常见问题
CSS动画和过渡有什么区别？
过渡是在两个状态之间进行动画化，需要像hover这样的触发器。动画可以通过@keyframes定义多个阶段，支持自动启动、无限循环和更复杂的运动。简单的状态变化使用过渡，复杂的序列使用动画。
如何让动画无限循环？
使用animation-iteration-count: infinite可以让动画无限循环。在简写属性中可以这样使用：'animation: myAnimation 2s infinite;'。将direction设置为alternate可以创建平滑的往返效果。
fill-mode是什么，为什么重要？
animation-fill-mode决定动画前后如何应用样式。'forwards'保持动画结束后的最终状态，'backwards'在延迟期间应用起始状态。'both'同时应用两种效果。
如何优化动画性能？
只对transform和opacity进行动画可以获得GPU加速，性能更好。width、height、top、left等会导致重排，性能较差。可以使用will-change属性给浏览器提示，但过度使用会产生反效果。
不用JavaScript可以控制动画吗？
使用animation-play-state: paused可以仅用CSS暂停动画。通过在:hover或:focus状态下改变此属性，可以实现用户交互控制。如果需要更精确的控制，请使用JavaScript的Web Animations API。