Styleguide

Category

Tag

All Colors

._u-animate

/src/css/object/utility/animate.styl 
<style>
._u-animate:hover {
  width: 100% !important;
  opacity: .5 !important;
}
</style>
<div class="_u-animate" style="background-color: #333; width: 100px; height: 20px;"></div>

._u-animate-size

/src/css/object/utility/animate.styl 
<style>
._u-animate-size:hover {
  width: 100% !important;
}
</style>
<div class="_u-animate-size" style="background-color: #333; width: 100px; height: 20px;"></div>

._u-animate-opacity

/src/css/object/utility/animate.styl 
<style>
._u-animate-opacity:hover {
  opacity: .5 !important;
}
</style>
<div class="_u-animate-opacity" style="background-color: #333; width: 100px; height: 20px;"></div>

._u-animate-shake-vertical

/src/css/object/utility/animate.styl 
<div class="_u-animate-shake-vertical" style="background-color: #333; width: 40px; height: 40px;"></div>

._u-animate-vibrate-vertical

/src/css/object/utility/animate.styl 
<div class="_u-animate-vibrate-vertical" style="background-color: #333; width: 40px; height: 40px;"></div>

._u-animate-shake-horizontal

/src/css/object/utility/animate.styl 
<div class="_u-animate-shake-horizontal" style="background-color: #333; width: 40px; height: 40px;"></div>

._u-animate-vibrate-horizontal

/src/css/object/utility/animate.styl 
<div class="_u-animate-vibrate-horizontal" style="background-color: #333; width: 40px; height: 40px;"></div>

._u-animate-shake-scale

/src/css/object/utility/animate.styl 
<div class="_u-animate-shake-scale" style="background-color: #333; width: 40px; height: 40px;"></div>

._u-animate-vibrate-scale

/src/css/object/utility/animate.styl 
<div class="_u-animate-vibrate-scale" style="background-color: #333; width: 40px; height: 40px;"></div>

._u-animate-extend-underline

/src/css/object/utility/animate.styl
menu
<span class="_u-animate-extend-underline">menu</span>