css3动画制作

CSS3动画基础

CSS3动画通过@keyframes规则定义动画序列，结合animation属性实现动态效果。核心属性包括：

• animation-name: 指定@keyframes名称
• animation-duration: 动画持续时间（如2s）
• animation-timing-function: 速度曲线（如ease-in-out）
• animation-delay: 延迟开始时间
• animation-iteration-count: 播放次数（infinite表示循环）
• animation-direction: 播放方向（如alternate）

定义关键帧动画

通过@keyframes定义动画阶段，百分比或from/to关键字描述状态变化：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* 或使用百分比 */
@keyframes move {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}

应用动画到元素

将定义好的动画绑定到选择器：

.element {
  animation-name: fadeIn;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
  animation-iteration-count: 2;
}
/* 简写形式 */
.element {
  animation: fadeIn 1.5s ease-out 0.5s 2;
}

常见动画效果示例

淡入效果：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-in {
  animation: fadeIn 1s;
}

弹跳效果：

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.bounce {
  animation: bounce 0.5s infinite;
}

旋转动画：

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spinner {
  animation: spin 2s linear infinite;
}

动画性能优化

• 优先使用transform和opacity属性，它们不会触发重排
• 避免频繁修改width/height/margin等属性
• 使用will-change预声明变化属性：

  .element {
    will-change: transform, opacity;
  }

• 硬件加速可通过transform: translateZ(0)触发

响应式动画控制

通过JavaScript动态控制动画：

const element = document.querySelector('.animated');
element.style.animationPlayState = 'paused'; // 暂停
element.style.animationPlayState = 'running'; // 继续

浏览器兼容性处理

添加前缀确保兼容旧版浏览器：

@-webkit-keyframes example {
  /* ... */
}
.element {
  -webkit-animation: example 2s;
  animation: example 2s;
}