css制作动漫

CSS 动画基础

CSS 动画通过 @keyframes 和 animation 属性实现。定义关键帧后，将其绑定到元素上即可触发动画效果。

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

.element {
  animation: slide-in 1s ease-out;
}

常用动画属性

• animation-name: 指定 @keyframes 名称。
• animation-duration: 动画时长（如 2s）。
• animation-timing-function: 速度曲线（如 ease-in-out）。
• animation-delay: 延迟启动时间。
• animation-iteration-count: 播放次数（infinite 表示循环）。
• animation-fill-mode: 动画结束后的样式状态（如 forwards 保留最后一帧）。

复杂动画示例

结合多个属性实现闪烁和缩放效果：

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

.box {
  animation: pulse 2s infinite;
}

动画性能优化

• 优先使用 transform 和 opacity，这些属性不会触发重排（reflow）。
• 避免频繁修改 width、height 或 margin 等属性。
• 使用 will-change 提示浏览器优化（如 will-change: transform）。

响应式动画

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

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

动画库与工具

• Animate.css: 提供预定义动画类（如 animate__bounce）。
• GSAP: 更强大的 JavaScript 动画库，支持复杂时间轴控制。

示例：悬停旋转效果

.button {
  transition: transform 0.3s;
}
.button:hover {
  transform: rotate(360deg);
}