css制作教程动画

CSS动画基础概念

CSS动画通过@keyframes规则定义动画序列，结合animation属性实现元素动态效果。关键属性包括：

• animation-name：绑定@keyframes名称
• animation-duration：动画持续时间（如2s）
• animation-timing-function：速度曲线（如ease-in-out）
• animation-iteration-count：播放次数（如infinite）

创建简单动画示例

定义@keyframes并应用动画：

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

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

此代码使元素从左侧滑入页面。

进阶动画技巧

多关键帧动画
在@keyframes中添加百分比阶段：

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

组合动画
通过逗号分隔多个动画：

.element {
  animation: slide-in 1s, fade-in 2s;
}

动画性能优化

• 优先使用transform和opacity属性（触发GPU加速）
• 避免频繁触发重排（如修改width/height）
• 使用will-change提示浏览器优化：

  .element {
  will-change: transform;
  }

响应式动画适配

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

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

实用工具推荐

• Animate.css：预置动画库，直接添加类名即可使用
• CSS Triggers：查询属性对渲染性能的影响

通过系统学习上述方法，可逐步掌握从基础到复杂的CSS动画实现。