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