CSS Animation 详解

CSS Animation 详解

一、CSS Animation 基础概念

1.1 什么是 CSS Animation

CSS Animation 允许元素在不同样式之间平滑过渡，而无需使用 JavaScript。

1.2 核心组成部分

• 关键帧 (@keyframes)：定义动画序列

• 动画属性 (animation properties)：控制动画行为

• 动画元素：应用动画的HTML元素

二、@keyframes 规则详解

2.1 基本语法

@keyframes animation-name {
  from {
    /* 起始状态 */
    property: value;
  }
  to {
    /* 结束状态 */
    property: value;
  }
}

2.2 百分比关键帧

@keyframes slide-and-fade {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  30% {
    transform: translateX(50px);
    opacity: 0.8;
  }
  70% {
    transform: translateX(100px);
    opacity: 0.5;
  }
  100% {
    transform: translateX(150px);
    opacity: 0.2;
  }
}

2.3 复合关键帧

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0,-4px,0);
  }
}

三、动画属性详解

3.1 animation-name

.element {
  animation-name: slide-in; /* 指定关键帧名称 */
}

/* 多个动画 */
.element {
  animation-name: fade-in, slide-up, rotate;
}

3.2 animation-duration

.element {
  animation-duration: 2s;    /* 2秒 */
  animation-duration: 500ms; /* 500毫秒 */
  animation-duration: 0.5s;  /* 0.5秒 */
  
  /* 多个动画不同时长 */
  animation-name: fade, slide;
  animation-duration: 1s, 2s; /* fade:1s, slide:2s */
}

3.3 animation-timing-function

预定义函数

.element {
  /* 线性，匀速 */
  animation-timing-function: linear;
  
  /* 缓动函数 */
  animation-timing-function: ease;        /* 默认，慢-快-慢 */
  animation-timing-function: ease-in;     /* 慢入 */
  animation-timing-function: ease-out;    /* 慢出 */
  animation-timing-function: ease-in-out; /* 慢入慢出 */
  
  /* 阶梯函数 */
  animation-timing-function: steps(4, jump-start);
  animation-timing-function: steps(10, jump-end);
  animation-timing-function: steps(5, jump-none);
  animation-timing-function: steps(3, jump-both);
}

贝塞尔曲线

.element {
  /* 自定义三次贝塞尔曲线 */
  animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
  
  /* 常见效果 */
  animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 弹性 */
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);  /* 弹跳 */
}

3.4 animation-delay

.element {
  /* 延迟开始 */
  animation-delay: 1s;
  animation-delay: -1s; /* 立即开始，从动画1秒处开始播放 */
  
  /* 多个动画不同延迟 */
  animation-name: fade, slide;
  animation-delay: 0s, 0.5s;
}

3.5 animation-iteration-count

.element {
  animation-iteration-count: 1;       /* 默认，播放1次 */
  animation-iteration-count: 3;       /* 播放3次 */
  animation-iteration-count: infinite; /* 无限循环 */
  animation-iteration-count: 2.5;     /* 播放2.5次 */
  
  /* 多个动画不同次数 */
  animation-name: blink, bounce;
  animation-iteration-count: infinite, 3;
}

3.6 animation-direction

.element {
  animation-direction: normal;       /* 默认，正向播放 */
  animation-direction: reverse;      /* 反向播放 */
  animation-direction: alternate;    /* 奇数次正向，偶数次反向 */
  animation-direction: alternate-reverse; /* 奇数次反向，偶数次正向 */
}

3.7 animation-fill-mode

.element {
  animation-fill-mode: none;          /* 默认，动画前后不应用样式 */
  animation-fill-mode: forwards;      /* 动画结束后保持最后一帧样式 */
  animation-fill-mode: backwards;     /* 动画开始前应用第一帧样式（需有delay） */
  animation-fill-mode: both;          /* 同时应用forwards和backwards */
}

3.8 animation-play-state

.element {
  animation-play-state: running;     /* 默认，动画运行 */
  animation-play-state: paused;      /* 动画暂停 */
}

/* 通过JavaScript控制 */
document.querySelector('.element').style.animationPlayState = 'paused';
document.querySelector('.element').style.animationPlayState = 'running';

3.9 animation 简写属性

.element {
  /* 完整语法 */
  animation: name duration timing-function delay iteration-count direction fill-mode play-state;
  
  /* 示例 */
  animation: slide-in 1s ease 0.5s 3 alternate both;
  
  /* 多个动画 */
  animation: 
    fade-in 0.5s ease-out,
    slide-up 1s ease-in-out 0.5s 2;
  
  /* 最小配置 */
  animation: bounce 2s infinite;
}

四、实践示例

4.1 基础动画

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

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

4.2 复杂动画序列

@keyframes complex-animation {
  0% {
    transform: translate(0, 0) rotate(0deg);
    background-color: red;
  }
  25% {
    transform: translate(200px, 0) rotate(90deg);
    background-color: blue;
  }
  50% {
    transform: translate(200px, 200px) rotate(180deg);
    background-color: green;
  }
  75% {
    transform: translate(0, 200px) rotate(270deg);
    background-color: yellow;
  }
  100% {
    transform: translate(0, 0) rotate(360deg);
    background-color: red;
  }
}

.box {
  width: 100px;
  height: 100px;
  animation: complex-animation 4s linear infinite;
}

4.3 加载动画

@keyframes loading-dots {
  0%, 20% {
    opacity: 0.2;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  80%, 100% {
    opacity: 0.2;
    transform: scale(0.8);
  }
}

.loading-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #3498db;
  animation: loading-dots 1.5s infinite ease-in-out;
}

.loading-dot:nth-child(1) { animation-delay: -0.3s; }
.loading-dot:nth-child(2) { animation-delay: -0.15s; }
.loading-dot:nth-child(3) { animation-delay: 0s; }

4.4 呼吸灯效果

@keyframes breathing {
  0%, 100% {
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 20px rgba(52, 152, 219, 0.8);
    transform: scale(1.05);
  }
}

.breathing-element {
  animation: breathing 3s ease-in-out infinite;
}

4.5 打字机效果

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: black }
}

.typewriter {
  overflow: hidden;
  border-right: .15em solid orange;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: .15em;
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

五、性能优化

5.1 使用高性能属性

/* 推荐使用（GPU加速） */
@keyframes good-animation {
  to {
    transform: translate3d(100px, 0, 0); /* 使用3D变换 */
    opacity: 0.5;
  }
}

/* 避免使用（触发重排） */
@keyframes bad-animation {
  to {
    left: 100px;    /* 触发布局重排 */
    width: 200px;   /* 触发布局重排 */
    margin: 20px;   /* 触发布局重排 */
  }
}

5.2 will-change 属性

.animated-element {
  will-change: transform, opacity; /* 提示浏览器提前优化 */
  animation: fade-in 1s ease;
}

5.3 减少重绘区域

/* 使用transform代替top/left */
@keyframes efficient-move {
  from { transform: translate(0, 0); }
  to { transform: translate(100px, 100px); }
}

/* 限制动画区域 */
.animate-container {
  position: relative;
  overflow: hidden; /* 限制重绘区域 */
}

.animate-item {
  animation: slide 2s ease;
}

六、响应式动画

6.1 媒体查询中的动画

/* 基础动画 */
.element {
  animation: basic-animation 1s ease;
}

/* 小屏幕设备调整动画 */
@media (max-width: 768px) {
  .element {
    animation-duration: 0.5s; /* 加快动画速度 */
    animation-name: mobile-animation;
  }
  
  @keyframes mobile-animation {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }
}

/* 减少动作敏感用户的动画 */
@media (prefers-reduced-motion: reduce) {
  .element {
    animation-duration: 0.01s !important;
    animation-iteration-count: 1 !important;
  }
}

6.2 使用 CSS 变量

:root {
  --animation-duration: 1s;
  --animation-timing: ease-in-out;
}

@keyframes slide {
  to { transform: translateX(var(--slide-distance, 100px)); }
}

.element {
  animation: slide var(--animation-duration) var(--animation-timing);
  
  /* 动态调整 */
  --slide-distance: 200px;
}

@media (prefers-reduced-motion) {
  :root {
    --animation-duration: 0.01s;
  }
}

七、高级技巧

7.1 动画事件监听

const element = document.querySelector('.animated-element');

// 监听动画事件
element.addEventListener('animationstart', (e) => {
  console.log('动画开始:', e.animationName);
});

element.addEventListener('animationend', (e) => {
  console.log('动画结束:', e.animationName);
  // 可以触发下一个动画
});

element.addEventListener('animationiteration', (e) => {
  console.log('动画迭代:', e.animationName, '迭代次数');
});

// 检查是否支持动画
const isSupported = typeof document.body.style.animation !== 'undefined';

7.2 动画状态控制

// 暂停/恢复动画
const toggleAnimation = (element) => {
  const isPaused = element.style.animationPlayState === 'paused';
  element.style.animationPlayState = isPaused ? 'running' : 'paused';
};

// 动态修改动画
const updateAnimation = (element) => {
  // 移除旧动画
  element.style.animation = 'none';
  
  // 强制重排
  element.offsetHeight;
  
  // 应用新动画
  element.style.animation = 'new-animation 2s ease';
};

7.3 瀑布流动画

.item {
  animation: fade-up 0.5s ease forwards;
  opacity: 0;
}

/* 为每个项目添加延迟 */
.item:nth-child(1) { animation-delay: 0.1s; }
.item:nth-child(2) { animation-delay: 0.2s; }
.item:nth-child(3) { animation-delay: 0.3s; }
.item:nth-child(4) { animation-delay: 0.4s; }
.item:nth-child(5) { animation-delay: 0.5s; }

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

7.4 动画与伪元素

.button {
  position: relative;
  overflow: hidden;
}

.button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
}

.button:active::after {
  animation: ripple 0.6s linear;
}

@keyframes ripple {
  to {
    transform: translate(-50%, -50%) scale(40);
    opacity: 0;
  }
}

八、常见问题与解决方案

8.1 动画闪烁问题

/* 解决方案：使用backface-visibility和transform-style */
.animated-element {
  transform: translateZ(0); /* 启用GPU加速 */
  backface-visibility: hidden;
  animation: slide 1s ease;
}

8.2 动画结束后样式恢复

/* 使用 animation-fill-mode: forwards */
.element {
  animation: fade-in 1s ease forwards;
}

@keyframes fade-in {
  to { opacity: 1; }
}

8.3 多个动画同步问题

/* 使用相同的动画时间线 */
.element {
  animation: 
    fade-in 1s ease forwards,
    slide-up 1s ease forwards;
  /* 相同的duration确保同步结束 */
}

/* 或者使用CSS变量统一控制 */
:root {
  --animation-timeline: 1s ease forwards;
}

.element {
  animation: 
    fade-in var(--animation-timeline),
    slide-up var(--animation-timeline);
}

8.4 检测动画支持

/* 使用@supports规则 */
@supports (animation: fade 1s) {
  .element {
    animation: fade 1s;
  }
}

/* 不支持时的降级方案 */
@supports not (animation: fade 1s) {
  .element {
    transition: opacity 1s;
    opacity: 0;
  }
}

九、浏览器兼容性

9.1 前缀支持

/* 为了更好的兼容性 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  -webkit-animation: fadeIn 1s; /* Chrome, Safari, iOS */
  -moz-animation: fadeIn 1s;    /* Firefox */
  -o-animation: fadeIn 1s;      /* Opera */
  animation: fadeIn 1s;         /* 标准语法 */
}

/* 使用PostCSS等工具自动添加前缀 */

9.2 兼容性表格

特性	Chrome	Firefox	Safari	Edge	iOS Safari
@keyframes	43.0	16.0	9.0	12.0	9.0
animation	43.0	16.0	9.0	12.0	9.0
animation-delay	43.0	16.0	9.0	12.0	9.0
animation-direction	43.0	16.0	9.0	12.0	9.0
animation-duration	43.0	16.0	9.0	12.0	9.0
animation-fill-mode	43.0	16.0	9.0	12.0	9.0
animation-iteration-count	43.0	16.0	9.0	12.0	9.0
animation-name	43.0	16.0	9.0	12.0	9.0
animation-play-state	43.0	16.0	9.0	12.0	9.0
animation-timing-function	43.0	16.0	9.0	12.0	9.0

十、最佳实践总结

10.1 性能最佳实践

1. 使用transform和opacity进行动画

2. 避免动画触发重排/重绘

3. 使用will-change提示浏览器

4. 减少动画复杂度

5. 考虑使用CSS动画代替JS动画

10.2 可访问性最佳实践

/* 尊重用户偏好 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 提供替代方案 */
.animated-content {
  animation: slide-in 0.5s ease;
}

.no-animation .animated-content {
  animation: none;
  opacity: 1;
  transform: none;
}

10.3 代码组织最佳实践

/* 定义动画库 */
:root {
  --animation-duration-fast: 0.2s;
  --animation-duration-normal: 0.3s;
  --animation-duration-slow: 0.5s;
  
  --animation-easing-default: ease-in-out;
  --animation-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 复用动画 */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 使用工具类 */
.animate-fade-in {
  animation: fade-in var(--animation-duration-normal) var(--animation-easing-default);
}

.animate-slide-up {
  animation: slide-up var(--animation-duration-slow) var(--animation-easing-bounce);
}

10.4 调试技巧

/* 调试动画时间线 */
.animated-element {
  animation: debug-animation 2s steps(10) infinite;
}

@keyframes debug-animation {
  0% { outline: 2px solid red; }
  10% { outline: 2px solid orange; }
  20% { outline: 2px solid yellow; }
  /* ... 更多颜色标记 */
  100% { outline: 2px solid purple; }
}

/* 使用Chrome DevTools的Animation Inspector */

十一、实际应用案例

11.1 模态框动画

@keyframes modal-fade-in {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes modal-backdrop-fade {
  from { opacity: 0; }
  to { opacity: 0.5; }
}

.modal-backdrop {
  animation: modal-backdrop-fade 0.3s ease forwards;
}

.modal-content {
  animation: modal-fade-in 0.3s ease 0.1s both;
}

11.2 页面过渡动画

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes page-exit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-30px);
  }
}

.page-enter {
  animation: page-enter 0.5s ease forwards;
}

.page-exit {
  animation: page-exit 0.5s ease forwards;
}

11.3 骨架屏加载动画

@keyframes skeleton-loading {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s infinite ease-in-out;
}

---

CSS Animation 是一个强大且性能优秀的动画解决方案，特别适合实现声明式的、性能敏感的动画效果。

通过合理使用，可以创建出流畅、美观的用户界面动画。