css制作动画源码

CSS动画制作方法

CSS动画可以通过@keyframes规则和animation属性实现。以下为常用方法和示例代码：

基础关键帧动画

定义动画关键帧并应用：

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.element {
  animation: slideIn 1s ease-out forwards;
}

多阶段动画

通过百分比定义复杂动画序列：

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.box {
  animation: pulse 2s infinite;
}

动画属性控制

完整动画属性配置示例：

.target {
  animation-name: rotate;
  animation-duration: 3s;
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

组合动画效果

同时运行多个动画：

@keyframes fade {
  to { opacity: 0; }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

.combo {
  animation: 
    fade 2s ease-in-out infinite alternate,
    bounce 1s ease-out infinite;
}

3D变换动画

创建三维空间动画：

@keyframes flip {
  0% {
    transform: perspective(400px) rotateY(0);
  }
  100% {
    transform: perspective(400px) rotateY(180deg);
  }
}

.card {
  transform-style: preserve-3d;
  animation: flip 1.5s ease-in-out;
}

性能优化建议

使用will-change属性预声明动画元素：

.animated-item {
  will-change: transform, opacity;
}

优先使用transform和opacity属性制作动画，这些属性不会触发重排，性能最佳。避免动画过程中改变width、height、margin等布局属性。