如何制作css bat

CSS 动画基础

CSS动画可以通过@keyframes规则和animation属性实现。定义一个动画序列，将其应用到元素上。

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 2s ease-in-out;
}

关键帧定义

使用@keyframes定义动画的中间状态。百分比或from/to关键字指定动画进度。

@keyframes slideIn {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(10%); }
  100% { transform: translateX(0); }
}

动画属性控制

animation是以下属性的简写：

• animation-name: 关键帧名称
• animation-duration: 动画时长（如2s）
• animation-timing-function: 速度曲线（如ease, linear）
• animation-delay: 延迟开始时间
• animation-iteration-count: 重复次数（infinite表示无限）
• animation-direction: 播放方向（alternate表示往返）
• animation-fill-mode: 动画结束后的样式状态

.box {
  animation: bounce 1s ease-in-out 0.5s infinite alternate;
}

性能优化建议

优先使用transform和opacity属性制作动画，这些属性不会触发重排或重绘。避免使用width、height、margin等属性。

@keyframes optimizedMove {
  to { transform: translateX(100px) scale(1.2); }
}

浏览器兼容性处理

为旧版本浏览器添加前缀。现代构建工具可自动处理前缀。

@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
.element {
  -webkit-animation: spin 2s linear infinite;
}

动画事件监听

通过JavaScript监听动画事件：

• animationstart
• animationend
• animationiteration

element.addEventListener('animationend', () => {
  console.log('动画结束');
});