css动漫制作教程

CSS动画制作基础

CSS动画通过@keyframes规则和animation属性实现。定义关键帧后，将其绑定到元素并设置持续时间、延迟等参数。

/* 定义关键帧 */
@keyframes slide-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* 应用动画 */
.element {
  animation: slide-in 1s ease-out;
}

常用动画属性组合

animation是以下属性的简写：

• animation-name: 指定@keyframes名称
• animation-duration: 动画持续时间（如2s）
• animation-timing-function: 速度曲线（ease, linear等）
• animation-delay: 开始前延迟
• animation-iteration-count: 播放次数（infinite表示无限循环）
• animation-direction: 播放方向（alternate表示往返播放）

复杂关键帧控制

百分比关键帧允许定义更细致的动画阶段：

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

动画性能优化技巧

使用transform和opacity属性可触发GPU加速，避免使用left/top等影响布局的属性。添加will-change属性预先告知浏览器：

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

动画事件监听

JavaScript可监听动画事件：

const element = document.querySelector('.box');
element.addEventListener('animationend', () => {
  console.log('动画结束');
});

动画库扩展方案

现有CSS动画库可快速实现复杂效果：

• Animate.css：预置弹跳、闪烁等常用动画类
• Magic.css：提供特殊变形效果
• Hover.css：专注悬停交互效果

通过添加类名即可调用：

<div class="animate__animated animate__bounce"></div>

响应式动画设计

结合媒体查询实现自适应动画：

@media (max-width: 768px) {
  .mobile-animation {
    animation: shrink 0.5s;
  }
}