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;
                }