1.1.1 #Behaviours.animation.animations Animations

Toggle example guides Toggle HTML markup

A small collection of predefined and reusable animations, useful for loading spinners, validations states etc.
Animations with * use transition.

Browser support: IE10+, Safari6+, Firefox30+, Chrome30+

Default styling
Weeee
sb-animation--hover-lift
move up
Weeee
sb-animation--hover-detach
move up and adds drop shadow
Weeee
sb-animation--spin
continuous rotation
Weeee
Markup 
<div class="sb-padding [modifier class] sb-justify-content-center sb-align-items-center sb-flex" style="width: 80px; border-radius:50%; background-color: #008aab; width: 75px; height: 75px; color: #fff;">
  Weeee
</div>
Source: layout/_animation.scss, line 5