Hover animations personalized your site and create delightful navigation experiences for the user. When the visitor hovers over an element on the page, the link or button reacts with a customized animation. This is both enjoyable for the visitor and shows that your site is functioning.

Armed with CSS3, front end developers can design transitions and animations without JavaScript or Flash. These interactions play a key role in improving the user interface of your web page.

Transitions allow you to alter the behavior and appearance of an element when there's a change in state, such as a mouseover. Animations can also let you change an element using special keyframes, which are rules that define the style of the element at a particular time.

Triggers for both can be set with CSS pseudo-classes such as the ones below.

  • :hover - when the mouse cursor hovers over the element
  • :focus - which reacts to user input
  • :active - when the element is clicked
  • :target - when a different element is clicked

In this post, we'll provide everything you need to know about CSS hover animations, including some examples that you can use on your website.

Free Intro Guide to HTML & CSS [Download Now]

What Is a CSS Hover Animation?

A CSS hover animation occurs when the mouse hovers over an element, and the element responds with motion or a transition. It's used to highlight key items on a web page and it's an effective way to enhance your site's interactivity.

Image source

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. It excludes the actual appearance of the animation, which is done using 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 timing has been configured, you need to set up the appearance of the animation. The @keyframes at-rule 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

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 50% moment and any additional breakpoints you may wish.

The properties to be animated are listed inside the breakpoints as shown below (left and top in the example):

 

@keyframes slide {

0% {

left: 0;

top: 0;

}

50% {

left: 244px;

top: 100px;

}

100% {

left: 488px;

top: 0px;

}

}

Code Source

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.

 

.stage:hover .ball {

animation: slide 2s ease-in-out .5s infinite alternate;

}

.stage: active .ball {

animation-play-state: paused;

}

Code Source

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 install 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

More Information | Demo

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

More Information | Demo

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

More Information

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

More Information

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

More Information

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

More Information

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.

Interactivity is key to user experience on a website. CSS hover animations not only improve the aesthetic appeal of your website — they also enhance the user's overall experience.

New Call-to-action

 css introduction

Originally published Feb 17, 2020 5:00:17 PM, updated February 21 2020

Topics:

CSS Animation