On-hover animations

On hover-animations take effect when a visitor hovers over a given element and allow you to create engaging interactions on your page.

In this article

Examples

Use hover:{animation} to apply an on-hover transition effect to an element.

Bob

"hover:bob"

Buzz

"hover:buzz"

Buzz out

"hover:buzz-out"

Hang

"hover:hang"

Pop

"hover:pop"

Pulse

"hover:pulse"

Pulse grow

"hover:pulse-grow"

Pulse shrink

"hover:pulse-shrink"

Push

"hover:push"

Wobble top

"hover:wobble-top"

Wobble bottom

"hover:wobble-bottom"

Wobble to bottom right

"hover:wobble-to-bottom-right"

Wobble to top right

"hover:wobble-to-top-right"

Wobble horizontal

"hover:wobble-horizontal"

Wobble vertical

"hover:wobble-vertical"

Wobble skew

"hover:wobble-skew"

Installation

These effects are part of the Animations and Transitions extension which is included in every theme by default. If you’d like to remove the styles associated with these animations you can do so by removing the following line from the document_head.hbs template:

<link rel="stylesheet" href="{{asset 'style-hover-animations.min.css'}}">

Questions or feedback about this article? Let us know