CSS动画概念[编辑 | 编辑源代码]

CSS动画（CSS Animations）是一种通过层叠样式表（CSS）实现元素动态效果的技术，允许开发者在不使用JavaScript的情况下创建平滑的视觉过渡和关键帧动画。它是现代网页设计中增强用户体验的核心工具之一。

核心概念[编辑 | 编辑源代码]

1. 动画的基本组成[编辑 | 编辑源代码]

CSS动画由两个关键部分组成：

@keyframes规则：定义动画的中间步骤（关键帧）
animation属性：将关键帧动画应用到元素并控制其行为

2. 与过渡(transition)的区别[编辑 | 编辑源代码]

特性	CSS动画	CSS过渡
控制程度	完全控制关键帧	只能定义起始和结束状态
自动触发	可以自动运行	需要状态变化触发
循环能力	支持无限循环	只能运行一次
中间状态	可定义多个关键帧	只有起始和结束状态

@keyframes规则[编辑 | 编辑源代码]

定义动画序列的关键帧语法：

@keyframes animation-name {
  0% {
    /* 起始状态 */
    property: value;
  }
  50% {
    /* 中间状态 */
    property: value;
  }
  100% {
    /* 结束状态 */
    property: value;
  }
}

示例：创建一个简单的淡入动画

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

animation属性[编辑 | 编辑源代码]

animation是以下子属性的简写：

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state

完整语法：

.element {
  animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}

实际案例[编辑 | 编辑源代码]

案例1：弹跳球效果[编辑 | 编辑源代码]

实现代码：

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-100px);
  }
  75% {
    transform: translateY(0) scale(1.1, 0.9);
  }
}

.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: red;
  animation: bounce 2s ease-in-out infinite;
}

案例2：进度条动画[编辑 | 编辑源代码]

@keyframes progress {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

.progress-bar {
  height: 20px;
  background: linear-gradient(to right, #4CAF50, #8BC34A);
  animation: progress 3s ease-out forwards;
}