_animate.sass

// *************************************
//
//   Animate
//   -> Movement and effects
//      CodePen: http://codepen.io/drewbarontini/pen/vErBjO
//
// -------------------------------------
//   Template (Haml)
// -------------------------------------
//
// .animate[fadeIn|slideDown|... infinite 1|2|3...]
//
// *************************************

// -------------------------------------
//   Variables
// -------------------------------------

// ----- Settings ----- //

$animate-duration: 1s !default
$animate-effects-basic: fadeIn, fadeOut, scaleDown, scaleUp, slideDown, slideUp !default
$animate-effects-fancy: bounce, fadeInDown, fadeInUp, flash, shake, tada !default
$animate-steps: 4 !default

// -------------------------------------
//   Base
// -------------------------------------

.animate
  animation-duration: $animate-duration
  animation-fill-mode: both

// -------------------------------------
//   Modifiers
// -------------------------------------

// ----- Effects ----- //

// Basic

@each $effect in $animate-effects-basic

  .animate--#{$effect}
    animation-name: $effect

// Fancy

@each $effect in $animate-effects-fancy

  .animate--#{$effect}
    animation-name: $effect

// ----- Infinite ----- //

.animate--infinite
  animation-iteration-count: infinite

// ----- Steps ----- //

@for $i from 1 through $animate-steps

  .animate--#{$i}
    animation-delay: ($animate-duration * $i) - $animate-duration

// -------------------------------------
//   Animations: Basic
// -------------------------------------

// ----- Fade In ----- //

@keyframes fadeIn
  from
    opacity: 0
  to
    opacity: 1

// ----- Fade Out ----- //

@keyframes fadeOut
  from
    opacity: 1
  to
    opacity: 0

// ----- Scale Down ----- //

@keyframes scaleDown
  from
    transform: scale(2)
  to
    transform: scale(1)

// ----- Scale Up ----- //

@keyframes scaleUp
  from
    transform: scale(0)
  to
    transform: scale(1)

// ----- Slide Down ----- //

@keyframes slideDown
  from
    transform: translateY(-100%)
  to
    transform: translateY(0)

// ----- Slide Up ----- //

@keyframes slideUp
  from
    transform: translateY(100%)
  to
    transform: translateY(0)

// -------------------------------------
//   Animations: Fancy (Animate.css)
//   -> Credit: http://daneden.github.io/animate.css/
// -------------------------------------

// ----- Bounce ----- //

@keyframes bounce
  0%, 20%, 53%, 80%, 100%
    transform: translate3d(0,0,0)
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
  40%, 43%
    transform: translate3d(0, -30px, 0)
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060)
  70%
    transform: translate3d(0, -15px, 0)
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060)
  90%
    transform: translate3d(0,-4px,0)

// ----- Fade In Down ----- //

@keyframes fadeInDown
  0%
    opacity: 0
    transform: translate3d(0, -100%, 0)
  100%
    opacity: 1
    transform: none

// ----- Fade In Up ----- //

@keyframes fadeInUp
  0%
    opacity: 0
    transform: translate3d(0, 100%, 0)
  100%
    opacity: 1
    transform: none

// ----- Flash ----- //

@keyframes flash
  0%, 50%, 100%
    opacity: 1
  25%, 75%
    opacity: 0

// ----- Shake ----- //

@keyframes shake
  0%, 100%
    transform: translate3d(0, 0, 0)
  10%, 30%, 50%, 70%, 90%
    transform: translate3d(-10px, 0, 0)
  20%, 40%, 60%, 80%
    transform: translate3d(10px, 0, 0)

// ----- Tada ----- //

@keyframes tada
  0%
    transform: scale3d(1, 1, 1)
  10%, 20%
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
  30%, 50%, 70%, 90%
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
  40%, 60%, 80%
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
  100%
    transform: scale3d(1, 1, 1)