动画css制作

基础动画实现

使用 @keyframes 定义动画关键帧，通过 animation 属性绑定到元素：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.element {
  animation: fadeIn 2s ease-in-out;
}

过渡效果

通过 transition 实现属性变化的平滑过渡：

.button {
  background: blue;
  transition: background 0.3s ease;
}
.button:hover {
  background: red;
}

变形动画

结合 transform 实现旋转、缩放等效果：

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

多属性动画

同时控制多个属性的动画效果：

@keyframes slideAndFade {
  0% { 
    transform: translateX(-100px); 
    opacity: 0; 
  }
  100% { 
    transform: translateX(0); 
    opacity: 1; 
  }
}
.box {
  animation: slideAndFade 1.5s forwards;
}

性能优化

优先使用 transform 和 opacity 触发硬件加速：

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

响应式动画

通过媒体查询调整动画参数：

@media (max-width: 600px) {
  .element {
    animation-duration: 1s;
  }
}