denkGroot/Spina

@keyframes flyIn
  0%
    opacity: 0
    transform: scale(.9)
  100%
    opacity: 1
    transform: scale(1)

.animated.flyIn
  animation: flyIn .4s ease

@keyframes flyOut
  0%
    opacity: 1
    transform: scale(1)
  100%
    opacity: 0
    transform: scale(.9)

.animated.flyOut
  animation: flyOut .4s ease

@keyframes small-shake
  0%, 100%
    transform: translateX(0)
  20%, 60%
    transform: translateX(7px)
  40%, 80%
    transform: translateX(-7px)

.animated.small-shake
  animation: small-shake .6s ease-in

@keyframes switchon
  0%
    transform: translate3d(0, 0, 0)
  50%
    width: 32px
    transform: translate3d(0, 0, 0)
  100%
    width: 23px
    transform: translate3d(17px, 0, 0)

@keyframes switchoff
  0%
    transform: translate3d(17px, 0, 0)
  100%
    transform: translate3d(0, 0, 0)

.deactivated .knob
  animation: switchoff .2s ease

.activated .knob
  animation: switchon .4s
  animation-fill-mode: forwards

@keyframes rotate
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(360deg)