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 'extension-animations.min.css'}}">