动画css制作

动画CSS制作方法

CSS动画可以通过@keyframes和animation属性实现动态效果，以下是几种常见方法：

基础关键帧动画

定义关键帧并应用到元素：

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

多状态动画

设置多个关键帧百分比点：

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

复合动画属性

同时控制多个动画参数：

.box {
  animation: 
    slide 3s ease-in-out infinite alternate,
    colorChange 5s linear infinite;
}

3D变换动画

结合transform-style实现立体效果：

@keyframes spin {
  to { transform: rotateY(360deg); }
}
.card {
  transform-style: preserve-3d;
  animation: spin 5s linear infinite;
}

性能优化技巧

• 优先使用transform和opacity属性（触发硬件加速）
• 避免动画过程中触发重排（如改变width/height）
• 使用will-change: transform预声明变化属性

实用动画代码示例

悬停放大效果：

.button {
  transition: transform 0.3s;
}
.button:hover {
  transform: scale(1.1);
}

无限旋转加载动画：

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

注意：现代CSS还支持scroll-driven animations等新特性，可通过animation-timeline关联滚动位置触发动画。