什么是CSS悬停动画，您如何使用它们？

CSS动画过渡可以个性化您的网站，并为访问者创造令人愉快的体验。例如，当网站访问者徘徊在链接或按钮（例如链接或按钮）之类的动画元素上时，它可以根据您的编码方式改变颜色，增长，收缩，旋转等等。这对于访客来说很愉快，并表明您的网站正在工作。

多亏了CSS，前端开发人员现在可以设计动画和过渡没有JavaScript或Flash。这意味着创建这种交互性既比以往更简单又便宜。

CSS动画和过渡属性均可用伪类指定，该类别定义了元素的特殊状态。只有在这种状态下，元素才会从一种样式变为另一种样式。伪级包括：

• ：徘徊- 当用户徘徊在元素上时
• ：重点- 当用户单击或点击元素时，或使用其键盘的选项卡键选择它
• ：积极的- 当用户点击元素时
• ：目标- when a user clicks on a different element

Of the pseudo-classes above, :hover is the most common.

在这篇文章中，我们将提供有关如何创建动画或悬停过渡的所有信息，包括您可以在网站上使用的一些示例。

What is a CSS hover animation?

当用户悬停在元素上时，就会发生CSS悬停动画，并且该元素以运动或其他过渡效果做出响应。它用于突出网页上的关键项目，这是增强网站交互性的有效方法。

看看下面的示例。如果你徘徊在div，它将逐渐从浅粉红色变为深色粉红色。

看到笔CSS过渡悬停由HubSpot（@HubSpot） 在Codepen。

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

过渡使您可以改变元素的行为和外观 - 但只有在触发器（例如用户徘徊在元素上）时才可以改变。一旦触发，过渡只能从初始状态移至最终状态。您无法指定任何中间点，并且过渡只能运行一次。

另一方面，动画可以循环，向后重复，并从初始状态转移到中间状态，借助关键帧。

Keyframes indicate the start and end of the animation, as well as any intermediate steps between the start and end. In other words, each keyframe describes how the animated element should render at a given time during the animation sequence.

让我们看一下下面的弹跳动画。

悬停在悬停

To grab your website visitor's attention, you can create a bounce effect when a user hovers over an element. All you have to do is define some animation properties and keyframes. We'll walk through如何在本文稍后逐步创建动画;现在，我们将简要介绍这个示例。

In the example below, I'll place the div in a flex container. That way it will only bounce in that defined container area and not overlap with the heading or paragraph.

然后，我将定义动画以在两秒钟内完成弹跳并无限运行（只要用户继续徘徊在DIV上）。我还将其定时为舒适使动画开始缓慢，加快速度，然后放慢速度。

最后，我将定义三个关键帧。第一个将设置动画的初始状态。在0％，或动画序列的第一时刻，元素将沿y轴为0px。在50％，或者在动画序列中的一半，该元素将向上移动Y轴100px。在100％，或动画序列的末尾，它将返回到Y轴上启动的位置，完成弹跳。

看看下面的结果。

看到笔悬停在悬停克里斯蒂娜·佩里奇（Christina Perricone）（@HubSpot） 在Codepen。

您可能已经注意到，不可能使用过渡属性创建反弹效应。那是因为您只能特定过渡元素的初始和末端状态，而不是中间点。意思是，您可以将其沿Y轴向上移动，但是您无法指定它以向下移动Y轴以完成反弹。

现在，我们更熟悉CSS悬停的动画和过渡，让我们看看为什么要花费时间和资源来创建它们。bob体育苹果系统下载安装

如何使用悬停CSS

Using the :hover pseudo-class in CSS has several potential benefits.

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

图像源

一些网站还使用悬停效果，因此仅当用户悬停在元素上时才会出现其他信息。否则，它仍然隐藏。这是在您的网站上添加工具提示建议的理想之选，这可以使初学者受益，但会使更多高级用户烦恼。这是开发人员Sasha Tran的示例。

您还可以使用悬停效果来鼓励访客在您的网站上采取行动。例如，当用户悬停在该按钮上时，可以使按钮变得更大，例如，可以帮助他们说服他们实际提交表格，进行购买或完成按钮所说的任何通话行动。它还可以鼓励他们点击按钮以外的其他元素，例如社交媒体图标。以下是亚当·摩根（Adam Morgan）的一个例子。

但是，重要的是要注意：悬停伪级并不总是按照触摸屏预期工作。当用户徘徊时，该元素可能永远不会开始其过渡或动画效果。否则它可能会在用户徘徊在元素上后的瞬间。或者，即使用户不再徘徊在循环上，并且只有在用户徘徊或单击另一个元素后，它也可能会连续播放其动画序列。它的行为取决于浏览器。

You should therefore ensure that your content is accessible on all devices, including those with limited or non-existent hovering capabilities. That means you can still create and add hover animations on your site, but they shouldn't be essential to the content's meaning or the user experience.

如何创建CSS悬停动画

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

1. Set up the animation property.

使用动画属性或其子专业的样式元素。

Note that this only configures the duration, timing, and other details of how the animation sequence will progress. To actually begin the animation sequence and make the element move, you'll need to set the@keyframes规则。

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

这动画property consists of the following sub-properties:

动画名称

这@keyframes设有规则。这动画名称声明用作属性和动画的名称属性值（例如动画名称: bounce;）。

动画效果

这是一个动画周期的时间长度。它可以以秒或毫秒（MS）为单位设置（例如动画效果: 3s;)。

动画态度功能

这就是动画通过密钥帧过渡的方式。它指定动画的速度曲线，确保更改顺利进行。您可以使用预定义的值，包括轻松，线性，易于插入和易于进出。您也可以将自己的值用于此功能。

动画延迟

这time before the loaded element starts the animation sequence. It's defined in seconds or milliseconds. The values are: time (optional), initial (sets the property to its default value), and inherit (inherits property from parent element).

允许负值。当设置为负面时，动画就好像已经在播放一样开始。例如，在动画 - 延迟：-2;, the animation will behave as if it started playing 2 seconds ago.

动画识别计数

这是动画重复的数量。您可以将其定义为无限的无限期地重复动画。属性值为：数字（默认值为1），无限，初始（将属性设置为默认值）和继承。

动画-direction

这配置了连续周期的起点。动画可以交替进行方向或重置并重复。属性值为：正常（向前播放），反向（向后播放），交替（向后播放然后向后播放），备用反向（向后播放，然后向前播放），初始和继承。

动画填充模式

这se are the values applied by the element when the animation isn't playing (i.e. before the first keyframe and after the last is played). The property values are: none (default, no styles applied to the element), forwards (element retains style values set by the last keyframe), backwards (element retains values set by the first keyframe), both (animation follows rules for both directions), initial, and inherit.

动画游戏状态

This specifies the status of the animation (running or paused). It allows a played animation to resume running from where it was paused rather than start over. The property values are: paused, running, initial, and inherit.

3.使用密钥帧来定义CSS悬停动画序列。

一旦定义了动画属性和子专业，您就需要设置@keyframes设有规则。这可以帮助您建立至少两个关键帧，以描述动画在序列期间的特定实例中如何出现。

为了获得所有浏览器的最佳支持，@keyframes规则必须像所有其他一样的供应商前缀过渡和动画特性。

供应商的前缀应像这样出现：

@-Moz-Keyframes

@-o-keyframes

@-webkit-keyframes

注意：以前的示例没有前缀，以使它们看起来尽可能简单。

为了指示不同的密钥帧断点，使用，为0％是序列的第一刻，100％是最后一刻。这两个点也可以由它们的别名定义从和到分别。

You can set up an intermediate moment at 50% and/or any additional breakpoints you may wish.

要动画的属性（剩下和到p）在断点内列出，如下所示，下面的shay howe。

请注意，只有单个属性可以动画。

例如，如果您想将元素从上到下移动，试图从顶部：0;到底部：0;wouldn't work.

Instead, you'd need to animate from顶部：0;到顶部：100％；。

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

Like transitions, animations can be written in a shorthand format. This is achieved by using one动画属性而不是多个声明。

按顺序，这就是如何中的值动画property should appear: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.

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

CSS悬停动画示例

When it comes to setting up CSS hover animations, your imagination is the limit. You can have elements zoom, flip, rotate, or even stop playing on hover. You can even go beyond simple effects and tap into the minds of other developers who have come up with sophisticated and interactive animations.

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

1. Sass Hover Effects

图像源

This developer shares examples of hover effects organized by industry, including travel, photography, and construction websites. They each come with a code that you can install into your page's HTML and CSS.

2.按钮悬停效果

图像源

这是一个收集的5个按钮悬停效果。When your mouse hovers over the button, they react with an animation. They're all smooth, simple, and ready to be used on your website or登陆页面。

3. CSS图像悬停效果

图像源

这是15个悬停效果，可以为您的图像增添生命。有些可以放大，滑动并旋转。

4.创意菜单悬停效果

图像源

这些CSS悬停效果将帮助您的网站在导航栏上具有互动体验。

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

图像源

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

6.放大动画悬停

图像源

放大，缩小或使用悬停样式创建图像增长效果。这非常适合突出图像的特定方面。

7. Flip Animation on Hover

图像源

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

8.旋转动画悬停

图像源

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

9.悬停在徘徊的动画

图像源

Give users a reason to stop in their tracks with this pause animation on hover. It's perfect for catching the visitor's attention when you want them to see a specific element on your page.

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

互动是关键providing a good user experienceon the web. CSS hover animations and transitions are a great way to improve the interactivity of your website. They can not only make your site more engaging — they can also provide important information to your visitors and encourage them to take action on your site. The best part: you only need to know a little bit of HTML and CSS to create them.