css动画制作效果

CSS动画基础语法

CSS动画通过@keyframes规则定义动画序列，配合animation属性实现。关键帧语法：

@keyframes 动画名称 {
  0% { 属性: 值; }
  50% { 属性: 值; }
  100% { 属性: 值; }
}

动画属性简写：

.element {
  animation: 名称 时长 缓动函数 延迟 次数 方向 填充模式;
}

常见动画效果实现

淡入淡出效果

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

滑动效果

@keyframes slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.slide-in {
  animation: slide 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

旋转效果

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

进阶动画技巧

多属性同时动画

@keyframes multi-effect {
  0% { 
    transform: scale(0.8);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.2);
    opacity: 1;
  }
}

步进动画

.typing {
  width: 12ch;
  animation: typing 2s steps(12);
  white-space: nowrap;
  overflow: hidden;
}

3D变换动画

@keyframes flip {
  0% { transform: rotateY(0); }
  100% { transform: rotateY(180deg); }
}
.card {
  transform-style: preserve-3d;
  animation: flip 1s forwards;
}

性能优化建议

使用transform和opacity属性制作动画，这些属性不会触发重排。避免在动画中使用width、height、margin等会触发布局变化的属性。

启用硬件加速：

.optimized {
  transform: translateZ(0);
  will-change: transform;
}

响应式动画控制

通过媒体查询控制动画：

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
  }
}