15 个惊艳的 CSS 动画案例速查表，助你提升前端技能！

CSS动画能显著提升网站的视觉吸引力，将静态设计转变为引人入胜的动态体验。在CSS中，animation 属性是实现动画效果的核心，它允许你通过单个属性值来定义动画的所有方面。animation 属性是一个简写属性，它包含了以下几个子属性及其默认值：

• animation-name

: 动画名称 (例如：myAnimation)，必须在 @keyframes 规则中预先定义。 默认值： none (不应用任何动画)。

• animation-duration

: 动画持续时间 (例如：2s 或 2000ms)。 默认值： 0s (动画瞬间完成)。

• animation-timing-function

: 动画速度曲线 (例如：linear, ease, ease-in, ease-out, ease-in-out, 或 cubic-bezier 函数)。 默认值： ease (缓入缓出)。

• animation-delay

: 动画延迟时间 (例如：1s 或 1000ms)，动画开始前的等待时间。 默认值： 0s (立即开始动画)。

• animation-iteration-count

: 动画循环次数 (例如：3 或 infinite)。 默认值： 1 (只播放一次)。

• animation-direction

: 动画播放方向 (例如：normal, reverse, alternate, alternate-reverse)。 默认值： normal (正常播放)。

• animation-fill-mode

: 动画播放前后元素样式 (例如：none, forwards, backwards, both)。 默认值： none (动画结束后恢复初始状态)。

这些属性值按顺序排列，构成 animation 属性的简写形式。 例如：

css 代码解读复制代码.my-element {
  animation: myAnimation 2s ease-in-out 1s infinite alternate forwards;
}复制

这段代码中：

• myAnimation: animation-name
• 2s: animation-duration
• ease-in-out: animation-timing-function
• 1s: animation-delay
• infinite: animation-iteration-count
• alternate: animation-direction
• forwards: animation-fill-mode

理解 animation 简写属性及其各个子属性和默认值是掌握 CSS 动画的关键。接下来，我们将学习 15 个更具体的案例。

1. 淡入动画

淡入效果是最简单也是最有效的动画之一。它很微妙，但却能有效地吸引用户注意新加载的内容。

css 代码解读复制代码@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
 
.fade-in {
  animation: fadeIn 1s ease-in;
}复制

使用场景：非常适合英雄图、模态窗口或任何动态出现的内容。

2. 从左侧平滑滑入

对于应该从左侧进入视野的内容，这种滑入效果提供了平滑的过渡。

css 代码解读复制代码@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
 
.slide-in-left {
  animation: slideInLeft 0.8s ease-out;
}复制

使用场景：滑入动画非常适合导航菜单、侧边栏或用户交互时出现的资讯面板。

3. 按钮悬停弹跳效果

在悬停时为按钮添加微妙的弹跳效果，可以让它们感觉更具互动性，并鼓励用户点击。

css 代码解读复制代码@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
 
.bounce-hover:hover {
  animation: bounce 0.5s ease-in-out;
}复制

使用场景：此效果适用于号召性用语按钮或任何希望用户频繁交互的元素。

4. 伸缩动画

伸缩动画赋予元素活力感，可用于交互式元素

css 代码解读复制代码@keyframes expandContract {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}
 
.expand-contract {
  animation: expandContract 0.6s ease-in-out infinite;
}复制

使用场景：可用于需要脉冲以吸引注意力的元素，例如警报或实时通知。

5. 旋转进入

为元素进入视口时添加旋转效果，可以营造出动态的印象，非常适合富有创意的非线性布局。

css 代码解读复制代码@keyframes rotateIn {
  from { transform: rotate(-360deg); }
  to { transform: rotate(0); }
}
 
.rotate-in {
  animation: rotateIn 1s ease-in-out;
}复制

使用场景：此效果可以应用于作品集或图库中的图标、卡片或图像。

6. 打字效果

模拟打字机的打字效果非常适合英雄标题，使文本以引人注目的方式出现。

css 代码解读复制代码.typing {
  overflow: hidden;
  border-right: 3px solid;
  white-space: nowrap;
  animation: typing 2s steps(20, end), blink 0.5s step-end infinite alternate;
}
 
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}
 
@keyframes blink {
  50% { border-color: transparent; }
}复制

使用场景：非常适合需要醒目信息传达的登录页面或核心区。

7. 悬停时颜色渐变背景

悬停时动画化背景颜色带来了充满活力的互动性，尤其适合卡片或功能区等元素。

css 代码解读复制代码.color-shift:hover {
  animation: colorShift 1s infinite alternate;
}
 
@keyframes colorShift {
  from { background-color: #3498db; }
  to { background-color: #e74c3c; }
}复制

使用场景：非常适合卡片、功能亮点或任何需要视觉对比的部分。

8. 漂浮效果

漂浮动画给人一种悬浮的印象，营造出轻柔而微妙的弹跳感。

css 代码解读复制代码@keyframes floating {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
 
.floating {
  animation: floating 3s ease-in-out infinite;
}复制

使用场景：非常适合代表轻盈或创意的3D图标、图像或元素。

9. 背景渐变过渡

渐变变化添加了生动而多彩的动画，对于背景来说视觉上很吸引人。

css 代码解读复制代码@keyframes gradientShift {
  0% { background: linear-gradient(45deg, #ff9a9e, #fad0c4); }
  50% { background: linear-gradient(45deg, #fad0c4, #fcb69f); }
  100% { background: linear-gradient(45deg, #fcb69f, #ff9a9e); }
}
 
.gradient-bg {
  animation: gradientShift 5s ease infinite;
}复制

使用场景：可用于希望突出的部分，例如重点横幅或页眉。

10. 弹出动画

创建快速、引人入胜的弹出效果，可以帮助你的UI元素感觉更具响应性和活力。

css 代码解读复制代码@keyframes popUp {
  0% { transform: scale(0.9); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
 
.pop-up {
  animation: popUp 0.4s ease;
}复制

使用场景：非常适合模态窗口、图像或通知。

11. 倾斜进入

添加倾斜效果使元素看起来像是带着转折“滑入”，增加了方向感。

css 代码解读复制代码@keyframes skewIn {
  0% { transform: translateX(-100%) skewX(-10deg); }
  100% { transform: translateX(0) skewX(0); }
}
 
.skew-entrance {
  animation: skewIn 1s ease-out;
}复制

使用场景：非常适合用户向下滚动时进入视口的页面内容区域。

12. 悬停缩小

缩小效果通过在悬停时略微减小元素的大小来提供交互提示。

css 代码解读复制代码.shrink:hover {
  animation: shrink 0.2s forwards;
}
 
@keyframes shrink {
  to { transform: scale(0.95); }
}复制

使用场景：非常适合交互式元素，尤其是按钮和图标。

13. 加载旋转器

旋转器对于加载屏幕来说至关重要，它向用户指示进度。

css 代码解读复制代码@keyframes spinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
 
.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spinner 1s linear infinite;
}复制

使用场景：需要时间渲染内容的页面或部分的加载器和旋转器。

14. 卡片翻转

卡片翻转效果为卡片提供了双面界面，增强了互动性。

css 代码解读复制代码.flip-card {
  perspective: 1000px;
}
 
.flip-card-inner {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
 
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}复制

使用场景：非常适合显示正反面内容的卡片，例如产品信息或描述。

15. 波浪动画

这种波浪效果为背景设计或分隔线创建了独特的动画波浪。

css 代码解读复制代码@keyframes wave {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
 
.wave {
  background: url('wave.svg');
  width: 200%;
  animation: wave 4s linear infinite;
}复制