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.

Thanks to CSS, front-end developers can now design animations and transitions without JavaScript or Flash. That means creating this interactivity is both simpler and less expensive than it used to be.

Download Now: Free Intro Guide to HTML & CSS

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. 

See the Pen CSS Transition on Hover by Christina Perricone (@hubspot) on CodePen.

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. 

Take a look at the result below.

See the Pen Bounce on Hover by Christina Perricone (@hubspot) on CodePen.

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.

Using hover effect so that users can clearly tell the difference between text and clickable links

Image Source

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.  

See the Pen CSS Grow Hover Effect by Adam Morgan (@AdamCCFC) on CodePen.

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:

animation-name

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;).

animation-duration

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;).

animation-timing-function

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.

animation-delay

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.

animation-iteration-count

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.

animation-direction

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.

animation-fill-mode

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.

animation-play-state

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:

@-moz-keyframes

@-o-keyframes

@-webkit-keyframes

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.

See the Pen Animations Keyframes by Shay Howe (@shayhowe) on CodePen.

Note that only individual properties may be animated.

For instance, if you wanted to move an element from the top to bottom, trying to animate from top: 0; to bottom: 0; wouldn't work.

Instead, you'd need to animate from top: 0; to top: 100%;.

4. Use CSS Hover Animation shorthand.

Like transitions, animations can be written in a shorthand format. This is achieved by using one animation property instead of multiple declarations.

See the Pen Shorthand Animations by Shay Howe (@shayhowe) on CodePen.

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.

1. Sass Hover Effects

Image Source

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. Button Hover Effects

Image Source

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.

3. CSS Image Hover Effects

Here are fifteen hover effects that add life to your images. There are some that zoom in and out, slide, and rotate.

4. Creative Menu Hover Effects

These CSS hover effects will help your website stand out with an interactive experience on your navigation bar.

5. Social Media Icons Hover Effect

Users will see a cool animation when the cursor moves over a social media button. This can be a good prompt to get them to share your website with others.

6. Zoom Animation on Hover

Image Source

Zoom in, zoom out, or use hover styling to create an image growth effect. This is great for highlighting a specific aspect of an image.

7. Flip Animation on Hover

Image Source

Create a card flipping effect to use available screen space to share additional information. This is great for a contact profile page that introduces your staff or different clients that you support.

8. Rotate Animation on Hover

Image Source

Rotate images using hover for an extra special effect. This can be a fun, lighthearted way to keep users engaged.

9. Pause Animation on Hover

Image Source

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.

New Call-to-action

 css introduction

Originally published Feb 1, 2021 7:00:00 AM, updated July 28 2021

Topics:

CSS Animation