CSS 动画可以个性化您的网站，并为您的访问者创造愉快的体验。例如，当网站访问者将鼠标悬停在链接或按钮等动画元素上时，该元素可能会改变颜色、增长、缩小、旋转或这些元素的组合。这不仅仅是眼睛的糖果 - 它也是视觉反馈，他们的互动正在发挥作用。

使用CSS，前端开发人员可以在没有JavaScript的情况下设计动画和过渡。这意味着创建交互式元素比以前更简单、更轻量级。

立即下载： 35 个代码模板 [免费代码片段]

CSS 动画和过渡属性都可以使用伪类指定，伪类定义元素的特殊状态。只有在这种状态下，元素才会从一种样式更改为另一种样式。伪类包括：

• ：hover，当用户将鼠标悬停在元素上时
• ：focus，当用户单击或点击元素，或使用 Tab 键选择它时
• ：active，当用户单击元素时
• ：target，当用户单击其他元素时

在上面的伪类中，：hover 是最常见的，这就是我们将在这篇文章中介绍的内容。我们将提供您需要了解的有关如何在悬停时创建动画或过渡的所有信息，包括

• 什么是 CSS 悬停动画
• 如何使用悬停伪类
• 如何使用 CSS 创建悬停动画
• 您可以在自己的网站上使用的一些示例

什么是 CSS 悬停动画？

当用户将光标悬停在元素上时，将发生 CSS 悬停动画，并且该元素以运动或其他动画效果进行响应。悬停动画突出显示网页上的关键项目，是增强站点交互性的有效方法。

请看下面的例子。如果将鼠标悬停在 div 上，它将逐渐从浅粉色变为深粉色。

虽然这看起来像一个动画，但它实际上是一个过渡。这两个术语通常可以互换使用，但动画和过渡在 CSS 中是不同的。

过渡允许您更改元素的行为和外观，但前提是存在触发器，例如用户将鼠标悬停在元素上。一旦触发，转换只能从初始状态移动到最终状态。不能指定任何中间点，并且转换只能运行一次。

另一方面，由于关键帧，动画可以循环、向后重复，并从初始状态移动到中间状态再到结束状态。

关键帧指示动画的开始和结束，以及开始和结束之间的任何中间步骤。换句话说，每个关键帧描述动画元素在动画序列中的给定时间应如何呈现。

例如，让我们看一下下面的悬停时反弹动画。

悬停时反弹

为了引起访问者的注意，您可以创建当用户将鼠标悬停在页面元素上时反弹效果。您所要做的就是定义一些动画属性和关键帧。我们将在本文后面逐步介绍如何创建动画。现在，我们将简要讨论此示例。

在下面的示例中，我将 div 放在一个 flex 容器中。这样，它只会在该定义的容器区域中反弹，而不会与标题或段落重叠。

然后，我将定义动画以在两秒钟内完成其弹跳并无限运行（只要光标位于 div 上）。我还将设置其时间以简化，以便动画开始缓慢，加速，然后减慢。

最后，我将定义三个关键帧。第一个将设置动画的初始状态。在 0% 或动画序列的第一个时刻处，元素将沿 y 轴处于 0px。在 50% 或动画序列进行到一半时，元素将在 y 轴上移动 -50px。在 100% 或动画序列结束时，它将返回到它在 y 轴上开始的位置，完成弹跳。

看看下面的结果。

您可能会注意到，使用过渡属性无法创建反弹效果。这是因为您只能指定过渡元素的初始和结束状态，而不能指定中间点。这意味着，你可以让粉红色的方块向上移动 y 轴，但你不能告诉它向下移动 y 轴来完成它的反弹。

现在我们已经更熟悉了 CSS 悬停动画和过渡，让我们看看为什么要创建它们。

如何使用悬停CSS

在 CSS 中使用 ：hover 伪类有几个好处。

首先，您可以使用它向访问者传达重要信息。例如，许多网站在其链接上添加悬停效果，以将它们与网站上的其他文本区分开来。

图片来源

某些网站还使用悬停效果，以便仅在用户将鼠标悬停在元素上时才显示其他信息。否则，它将保持隐藏状态。这非常适合向您的网站添加工具提示 - 这是开发人员Sasha Tran的示例：

您还可以使用悬停效果来鼓励访问者在您的网站上执行操作。例如，当用户将鼠标悬停在按钮上时，使按钮变大可能会说服他们实际提交表单、进行购买或完成您想要的任何号召性用语。下面是亚当摩根的一个例子。

但是，在触摸屏设备上实现 ：hover 伪类时要小心。当用户将鼠标悬停在元素上时，该元素可能永远不会开始其过渡或动画效果。或者，它可能会在用户将鼠标悬停在元素上后停止片刻。或者，它可能会循环播放其动画序列，即使用户不再将鼠标悬停在其上也是如此。它的行为取决于浏览器。

因此，您应确保您的内容可在所有设备上访问，包括悬停功能有限或不存在的设备。这意味着您仍然可以在网站上创建和添加悬停动画，但它们对内容的含义或用户体验并不重要。

如何创建 CSS 悬停动画

以下是在元素上设置 CSS 悬停动画的方法：

1. 设置动画属性。

使用动画属性或其子属性设置元素样式。

请注意，这仅配置动画序列的持续时间、计时和其他详细信息。要实际开始动画序列并使元素移动，您需要设置@keyframes规则。

2. 定义动画属性的子属性。

动画属性由以下子属性组成：

动画名称

规则@keyframes。动画名称声明用作属性，动画名称用作属性值（例如，动画名称：反弹）。

动画持续时间

这是一个动画周期的时间长度。它可以以秒 （s） 或毫秒 （ms） 为单位设置（例如动画持续时间：3 秒）。

动画计时函数

这就是动画在关键帧中过渡的方式。它指定动画的速度曲线，确保更改顺利进行。

您可以使用预定义的值，包括缓动值、线性值、缓入值和缓入值。 您还可以为此函数使用自己的值。

动画延迟

加载的元素开始动画序列之前的时间，以秒或毫秒为单位定义。

这些值包括：时间（可选）、初始（将属性设置为其默认值）和继承（从父元素继承属性）。

也允许使用负值。当设置为负数时，动画将开始，就好像它已经在播放一样。例如，在animation-delay： -2s中，动画的行为就像它在两秒前开始播放一样。

动画迭代计数

这是动画在停止之前重复的次数。您可以将其定义为无限以无限期地重复动画。

属性值为：数字（默认值为 1）、无限（动画永远循环）、初始和继承。

动画方向

这将配置连续循环的起点。动画可以交替方向或重置并重复。

属性值为：正常（向前播放）、反向（向后播放）、备用（向前播放然后向后播放）、交替-反向（向后播放然后向前播放）、初始和继承。

动画填充模式

这些是元素在动画未播放时应用的值（即在播放第一个关键帧之前和播放最后一个关键帧之后）

属性值包括：无（默认值，不应用于元素的样式）、向前（元素保留由最后一个关键帧设置的样式值）、向后（元素保留由第一个关键帧设置的值）、两者（动画遵循两个方向的规则）、初始和继承。

动画播放状态

这将指定动画的状态（正在运行或暂停）。它允许播放的动画从暂停的位置恢复运行，而不是重新开始。

属性值为：暂停、正在运行、初始和继承。

3. 使用关键帧定义 CSS 悬停动画序列。

定义动画属性和子属性后，需要设置规则@keyframes。这有助于您建立至少两个关键帧，用于描述动画在序列期间在特定实例上的显示方式。

若要在所有浏览器中获得最佳支持，@keyframes规则必须以供应商为前缀，就像所有其他过渡和动画属性一样。

供应商前缀应如下所示：

@-莫兹关键帧

@-o-关键帧

@-webkit-关键帧

注意：前面的示例没有供应商前缀，以使其尽可能简单。

为了指示不同的关键帧断点，使用百分比，其中 0% 表示序列的第一个时刻，100% 表示最后一个时刻。这两个点也可以分别由它们的别名 from 和 to 来定义。

您可以设置 50% 的中间矩和/或您可能希望的任何其他断点。

要进行动画处理的属性（左侧和顶部）列在断点内，如下面的 Shay Howe 示例所示。

请注意，只能对单个属性进行动画处理。例如，如果要从上到下移动元素，则尝试从顶部：0到底部：0进行动画处理是行不通的。相反，您需要从顶部：0 到顶部：100% 进行动画处理。

4. 使用 CSS 悬停动画速记。

与过渡一样，动画也可以以速记格式编写。这是通过使用一个动画属性而不是多个声明来实现的。

按顺序，动画属性中的值应按顺序显示：

• 动画名称

• 动画持续时间

• 动画计时函数

• 动画延迟

• 动画迭代计数

• 动画方向

• 动画填充模式

• 动画播放状态

现在您知道如何创建 CSS 悬停动画，让我们看一些示例来为您提供一些灵感。

CSS 悬停动画示例

在设置 CSS 悬停动画时，您的想象力是极限。您可以让元素缩放、翻转、旋转，甚至在悬停时停止播放。您甚至可以超越简单的效果，并利用其他开发人员的想法，他们提出了复杂的交互式动画。

以下是您可以用于您的网站的一些最酷的动画。

1. 悬停效果

图片来源

此开发人员分享了按行业组织的悬停效果示例，包括旅游、摄影和建筑网站。它们每个都带有一个代码，您可以将其安装到页面的HTML和CSS中。

2.按钮悬停效果

图片来源

这是五个按钮悬停效果的集合。当您的鼠标悬停在按钮上时，它们会以动画做出反应。它们都流畅、简单，可以在您的网站或登录页面上使用。

3.CSS图像悬停效果

图片来源

这里有十五种悬停效果，可以为您的图像增添活力。有一些可以放大和缩小、滑动和旋转。

4. 创意菜单悬停效果

图片来源

这些 CSS 悬停效果将帮助您的网站在导航栏上提供交互式体验。

5. 社交媒体图标悬停效果

图片来源

当光标移到社交媒体按钮上时，用户将看到一个很酷的动画。这是一个很好的提示，让他们与他人共享您的网站。

6.悬停时缩放动画

图片来源

放大、缩小或使用悬停样式来创建图像增长效果。这对于突出显示图像的特定方面非常有用。

7.悬停时翻转动画

代码源

创建卡片翻转效果以使用可用的屏幕空间共享其他信息。这对于介绍您的员工或您支持的不同客户的联系人个人资料页面非常有用。

8.悬停时旋转动画

图片来源

使用悬停旋转图像以获得额外的特殊效果。这可能是一种有趣、轻松的方式，可以保持用户的参与度。

9.悬停动画

图片来源

让用户有理由在悬停时使用此暂停动画停止其轨道。当您希望访问者在您的页面上看到特定元素时，它非常适合吸引访问者的注意力。

将悬停动画添加到您的网站。

交互性是在 Web 上提供良好用户体验的关键。CSS 悬停动画和过渡是提高网站交互性的好方法。它们不仅可以使您的网站更具吸引力，还可以为您的访问者提供重要信息，并鼓励他们在您的网站上采取行动。最好的部分：你只需要知道一点HTML和CSS来创建它们。