CSS Animations 动画完全指南

CSS Animations 动画完全指南

引言

CSS Animations 是创建复杂动画效果的强大工具。本文将深入探讨动画的各种用法和高级技巧。

基础概念回顾

动画组成

• @keyframes: 定义动画关键帧
• animation-name: 指定动画名称
• animation-duration: 动画持续时间
• animation-timing-function: 时间函数
• animation-delay: 延迟时间
• animation-iteration-count: 迭代次数
• animation-direction: 动画方向
• animation-fill-mode: 填充模式
• animation-play-state: 播放状态

基本语法

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

.element {
  animation: slide 0.5s ease forwards;
}

高级技巧一：关键帧动画

基础关键帧

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

多关键帧

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

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

复杂动画序列

@keyframes complex {
  0% {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
  33% {
    transform: translateX(100px) rotate(90deg);
    opacity: 0.7;
  }
  66% {
    transform: translateX(200px) rotate(180deg);
    opacity: 0.4;
  }
  100% {
    transform: translateX(300px) rotate(270deg);
    opacity: 0;
  }
}

高级技巧二：时间函数

基础时间函数

.ease { animation-timing-function: ease; }
.linear { animation-timing-function: linear; }
.ease-in { animation-timing-function: ease-in; }
.ease-out { animation-timing-function: ease-out; }
.ease-in-out { animation-timing-function: ease-in-out; }

自定义贝塞尔曲线

.custom-bezier {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.bounce-bezier {
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

阶梯函数

.steps-animation {
  animation-timing-function: steps(5, end);
}

高级技巧三：动画属性

动画方向

.normal { animation-direction: normal; }
.reverse { animation-direction: reverse; }
.alternate { animation-direction: alternate; }
.alternate-reverse { animation-direction: alternate-reverse; }

填充模式

.none { animation-fill-mode: none; }
.forwards { animation-fill-mode: forwards; }
.backwards { animation-fill-mode: backwards; }
.both { animation-fill-mode: both; }

迭代次数

.once { animation-iteration-count: 1; }
.twice { animation-iteration-count: 2; }
.infinite { animation-iteration-count: infinite; }

高级技巧四：组合动画

同步动画

.combo-animation {
  animation: 
    fadeIn 0.5s ease forwards,
    slideUp 0.5s ease 0.2s forwards;
}

顺序动画

.delay-animation {
  animation: 
    first 0.3s ease forwards,
    second 0.3s ease 0.3s forwards,
    third 0.3s ease 0.6s forwards;
}

独立动画属性

.element {
  animation-name: bounce;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

实战案例：加载动画

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.loader {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loader-ring {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #667eea;
  animation: pulse-ring 1.5s ease-out infinite;
}

实战案例：卡片入场动画

@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.card {
  animation: cardEnter 0.4s ease-out forwards;
}

.card:nth-child(2) {
  animation-delay: 0.1s;
}

.card:nth-child(3) {
  animation-delay: 0.2s;
}

.card:nth-child(4) {
  animation-delay: 0.3s;
}

实战案例：按钮点击效果

@keyframes buttonPress {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  }
  50% {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  }
}

.btn:active {
  animation: buttonPress 0.2s ease-out;
}

实战案例：文字打字效果

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

@keyframes blink {
  50% { border-color: transparent; }
}

.typewriter {
  overflow: hidden;
  border-right: 2px solid #667eea;
  white-space: nowrap;
  animation: typing 3s steps(40, end), blink 0.75s step-end infinite;
}

常见问题与解决方案

Q1：动画不播放？

A：确保定义了关键帧和动画名称：

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

.element {
  animation: myAnimation 1s ease;
}

Q2：动画卡顿？

A：使用 will-change 优化：

.element {
  will-change: transform;
  animation: myAnimation 1s ease;
}

Q3：动画不循环？

A：设置迭代次数：

.element {
  animation: myAnimation 1s ease infinite;
}

最佳实践

1. 使用 CSS 变量

:root {
  --animation-duration: 0.3s;
  --animation-ease: ease;
}

.element {
  animation: myAnimation var(--animation-duration) var(--animation-ease);
}

2. 组合 transform 属性

@keyframes combined {
  to {
    transform: translateX(100px) rotate(45deg) scale(1.2);
  }
}

3. 使用 forwards 填充模式

.element {
  animation: fadeIn 0.5s ease forwards;
}

总结

CSS Animations 是创建复杂动画效果的强大工具。通过本文的学习，你应该能够：

1. 创建关键帧动画
2. 使用不同的时间函数
3. 控制动画属性
4. 组合多个动画
5. 创建加载动画
6. 实现入场动画效果

掌握这些技巧，能够帮助你创建更加吸引人的界面交互。