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

前端宝哥
1 阅读6分钟

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 属性的简写形式。 例如：

.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. 淡入动画

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

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

.fade-in {
  animation: fadeIn 1s ease-in;
}

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

2. 从左侧平滑滑入

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

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

.slide-in-left {
  animation: slideInLeft 0.8s ease-out;
}

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

3. 按钮悬停弹跳效果

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

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

.bounce-hover:hover {
  animation: bounce 0.5s ease-in-out;
}

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

4. 伸缩动画

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

@keyframes expandContract {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.expand-contract {
  animation: expandContract 0.6s ease-in-out infinite;
}

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

5. 旋转进入

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

@keyframes rotateIn {
  from { transform: rotate(-360deg); }
  to { transform: rotate(0); }
}

.rotate-in {
  animation: rotateIn 1s ease-in-out;
}

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

6. 打字效果

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

.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. 悬停时颜色渐变背景

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

.color-shift:hover {
  animation: colorShift 1s infinite alternate;
}

@keyframes colorShift {
  from { background-color: #3498db; }
  to { background-color: #e74c3c; }
}

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

8. 漂浮效果

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

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

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

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

9. 背景渐变过渡

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

@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元素感觉更具响应性和活力。

@keyframes popUp {
  0% { transform: scale(0.9); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.pop-up {
  animation: popUp 0.4s ease;
}

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

11. 倾斜进入

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

@keyframes skewIn {
  0% { transform: translateX(-100%) skewX(-10deg); }
  100% { transform: translateX(0) skewX(0); }
}

.skew-entrance {
  animation: skewIn 1s ease-out;
}

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

12. 悬停缩小

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

.shrink:hover {
  animation: shrink 0.2s forwards;
}

@keyframes shrink {
  to { transform: scale(0.95); }
}

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

13. 加载旋转器

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

@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. 卡片翻转

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

.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. 波浪动画

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

@keyframes wave {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.wave {
  background: url('wave.svg');
  width: 200%;
  animation: wave 4s linear infinite;
}

使用场景：非常适合页脚设计、分隔部分或装饰性背景。

总结

运用合适的CSS动画，你可以让你的Web应用更具动态性、互动性和用户友好性。尝试这些效果，并根据你的项目外观和风格进行自定义。CSS动画不仅使界面更具视觉吸引力，还为用户提供了微妙的视觉线索，从而增强了用户体验和与内容的互动。

后语

小伙伴们，如果觉得本文对你有些许帮助，点个👍或者➕个关注再走吧^_^ 。另外如果本文章有问题或有不理解的部分，欢迎大家在评论区评论指出，我们一起讨论共勉。

avatar
文章
阅读
粉丝