Examples
Use hover:{transition} to apply an on-hover transition effect to an element.
Backward
"hover:backward"
Forward
"hover:forward"
Float
"hover:float"
Sink
"hover:sink"
Grow
"hover:grow"
Shrink
"hover:shrink"
Rotate
"hover:rotate"
Grow rotate
"hover:grow-rotate"
Bounce in
"hover:bounce-in"
Bounce out
"hover:bounce-out"
Skew
"hover:skew"
Skew backward
"hover:skew-backward"
Skew forward
"hover:skew-forward"
Shadow
"hover:shadow"
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-transitions.min.css'}}">