CSS animations and transitions can personalize your site and create delightful experiences for your visitors. When a website visitor hovers over an animated element like a link or button for example, it can change color, grow, shrink, rotate, and more, depending on how you coded it. This is enjoyable for the visitor and shows that your site is working.
Both the CSS animation and transition properties can be specified with pseudo-classes, which define a special state of the element. Only in that state will the element change from one style to another. Pseudo-classes include:
:hover - when a user hovers over the element
:focus - when a user clicks or taps the element, or selects it with the Tab key of their keyboard
:active - when a user clicks on the element
:target - when a user clicks on a different element
Of the pseudo-classes above, :hover is the most common.
In this post, we'll provide everything you need to know about how to create an animation or transition on hover, including some examples that you can use on your website.
What is a CSS hover animation?
A CSS hover animation occurs when a user hovers over an element, and the element responds with motion or another transition effect. It's used to highlight key items on a web page and it's an effective way to enhance your site's interactivity.
Take a look at the example below. If you hover over the div, it will gradually change from light pink to dark pink.
While this looks like an animation, it's actually a transition. The two terms are often used interchangeably, but animations and transitions are different.
Transitions allow you to alter the behavior and appearance of an element — but only when there's a trigger, like a user hovering over the element. Once triggered, transitions can only move from an initial state to a final state. You can't specify any intermediate points, and the transition can only run once.
Animations, on the other hand, can loop, repeat backwards, and move from an initial state to intermediate states to an end state, thanks to keyframes.
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.
Let's take a look at a bounce animation below.
Bounce on Hover
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 how to create an animation step-by-step later in this post; for now, we'll just briefly talk through this example.
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.
Then I'll define the animation to complete its bounce in two seconds and run infinitely (as long as the user continues to hover over the div). I'll also set its timing to ease so that the animation starts out slow, speeds up, and then slows down.
Finally, I'll define three keyframes. The first will set the initial state of the animation. At 0%, or the first moment of the animation sequence, the element will be at 0px along the Y-axis. At 50%, or halfway through the animation sequence, the element will move 100px up the Y-axis. At 100%, or the end of the animation sequence, it will return to where it started on the Y-axis, completing its bounce.
You may have noticed already that it would not be possible to create a bounce effect using the transition property. That's because you can only specific the initial and end state of the transitioning element — not an intermediate point. Meaning, you could have it move up along the Y-axis, but you couldn't specify it to move back down the Y-axis to complete its bounce.
Now that we're more familiar with CSS hover animations and transitions, let's look at why you'd want to spend time and resources creating them.
How to Use Hover CSS
Using the :hover pseudo-class in CSS has several potential benefits.
You can use it to convey important information to your visitors. For example, many websites add a hover effect over their links to set them apart from other text on their site.
Some websites also use the hover effect so that additional information only appears when a user hovers over an element. Otherwise, it remains hidden. This is perfect for adding tooltip suggestions to your site, which can benefit beginners but annoy more advanced users. Here's an example by developer Sasha Tran.
You can also use the hover effect to encourage visitors to take an action on your site. Making a button grow bigger when a user hovers over it, for example, can help persuade them to actually submit the form, make the purchase, or complete whatever call-to-action the button says. It can also encourage them to click on elements other than buttons, like social media icons. Below is an example by Adam Morgan.
However, it is important to note that the :hover pseudo-class does not always work as expected on touchscreens. The element might never begin its transition or animation effect when the user hovers over it. Or it might stop a moment after the user hovers over the element. Or it might continuously play through its animation sequence on loop even if the user is no longer hovering over it and only stop once the user hovers or clicks on another element. Its behavior depends on the browser.
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.
How to Create a CSS Hover Animation
Here's how to set up a CSS hover animation on an element:
1. Set up the animation property.
Use the animation property or its sub-properties to style the element.
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 rule.
2. Define the animation property's sub-properties.
The animation property consists of the following sub-properties:
The @keyframes at-rule. The animation-name declaration is used as the property and the name of the animation the property value (e.g. animation-name: bounce;).
This is the length of time for one animation cycle. It may be set in seconds (s) or milliseconds (ms) (e.g. animation-duration: 3s;).
This is how the animation transitions through keyframes. It specifies the speed curve of an animation, ensuring the changes occur smoothly. There are predefined values you can use including ease, linear, ease-in, and ease-in-out. You can also use your own values for this function.
The 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).
Negative values are allowed. When set to negative, the animation starts as if it had already been playing. For instance, in animation-delay: -2s;, the animation will behave as if it started playing 2 seconds ago.
This is the number of animation repetitions. You can define it as infinite to repeat the animation indefinitely. The property values are: number (default value is 1), infinite, initial (sets property to its default value), and inherit.
This configures the starting point of successive cycles. The animation can alternate direction or reset and repeat. The property values are: normal (plays forwards), reverse (plays backwards), alternate (plays forwards then backwards), alternate-reverse (plays backwards then forwards), initial, and inherit.
These 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. Use keyframes to define the CSS Hover Animation sequence.
Once the animation property and sub-properties have been defined, you need to set up the @keyframes at-rule. This helps you establish at least two keyframes that describe how the animation should appear at specific instances during the sequence.
To get the best support across all browsers, the @keyframes rule must be vendor prefixed, like all other transition and animation properties.
The vendor prefixes should appear like this:
Note: the previous examples have not been vendor prefixed in order to make them look as simple as possible.
To indicate the different keyframe breakpoints, a <percentage> is used with 0% being the first moment of the sequence and 100% being the last. The two points can also be defined by their aliases from and to respectively.
You can set up an intermediate moment at 50% and/or any additional breakpoints you may wish.
The properties to be animated (left and top) are listed inside the breakpoints as shown in the example by Shay Howe below.
In order, this is how the values within the animation property should appear: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.
Now that you know how to create a CSS hover animation, let's look at some examples to give you some inspiration.
CSS Hover Animation Examples
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.
Here are some of the coolest animations you can use for your site.
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.
This is a collection of five button hover effects. 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 landing page.
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.
Adding Hover Animations to Your Website
Interactivity is key to providing a good user experience on 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.
Originally published Feb 1, 2021 7:00:00 AM, updated February 01 2021