Sass keyframes animations

_animations.scss

// Slide In From The Bottom To The Top
// -------------------------------

@-webkit-keyframes slideInUp {
  0%   { -webkit-transform: translate3d(0, 100%, 0); }
  100% { -webkit-transform: translate3d(0, 0, 0); }
}
@-moz-keyframes slideInUp {
  0%   { -moz-transform: translate3d(0, 100%, 0); }
  100% { -moz-transform: translate3d(0, 0, 0); }
}
@keyframes slideInUp {
  0%   { transform: translate3d(0, 100%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

// Slide In From The Bottom To The Top / Small
// -------------------------------

@-webkit-keyframes slideInUpSmall {
  0%   { -webkit-transform: translate3d(0, 20%, 0); }
  100% { -webkit-transform: translate3d(0, 0, 0); }
}
@-moz-keyframes slideInUpSmall {
  0%   { -moz-transform: translate3d(0, 20%, 0); }
  100% { -moz-transform: translate3d(0, 0, 0); }
}
@keyframes slideInUpSmall {
  0%   { transform: translate3d(0, 20%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}


// Slide Out From The Top To Bottom
// -------------------------------

@-webkit-keyframes slideOutUp {
  0%   { -webkit-transform: translate3d(0, 0, 0); }
  100% { -webkit-transform: translate3d(0, 100%, 0); }
}
@-moz-keyframes slideOutUp {
  0%   { -moz-transform: translate3d(0, 0, 0); }
  100% { -moz-transform: translate3d(0, 100%, 0); }
}
@keyframes slideOutUp {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, 100%, 0); }
}


// Slide In From Left
// -------------------------------

@-webkit-keyframes slideInFromLeft {
    from { -webkit-transform: translate3d(-100%, 0, 0); }
    to { -webkit-transform: translate3d(0, 0, 0); }
}
@-moz-keyframes slideInFromLeft {
    from { -moz-transform: translateX(-100%); }
    to { -moz-transform: translateX(0); }
}
@keyframes slideInFromLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}


// Slide In From Right
// -------------------------------

@-webkit-keyframes slideInFromRight {
    from { -webkit-transform: translate3d(100%, 0, 0); }
    to { -webkit-transform: translate3d(0, 0, 0); }
}
@-moz-keyframes slideInFromRight {
    from { -moz-transform: translateX(100%); }
    to { -moz-transform: translateX(0); }
}
@keyframes slideInFromRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}


// Slide Out To Left
// -------------------------------

@-webkit-keyframes slideOutToLeft {
  from { -webkit-transform: translate3d(0, 0, 0); }
  to { -webkit-transform: translate3d(-100%, 0, 0); }
}
@-moz-keyframes slideOutToLeft {
  from { -moz-transform: translateX(0); }
  to { -moz-transform: translateX(-100%); }
}
@keyframes slideOutToLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}


// Slide Out To Right
// -------------------------------

@-webkit-keyframes slideOutToRight {
  from { -webkit-transform: translate3d(0, 0, 0); }
  to { -webkit-transform: translate3d(100%, 0, 0); }
}
@-moz-keyframes slideOutToRight {
  from { -moz-transform: translateX(0); }
  to { -moz-transform: translateX(100%); }
}
@keyframes slideOutToRight {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}


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

@-webkit-keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@-moz-keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}


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

@-webkit-keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@-moz-keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


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

@-webkit-keyframes fadeInHalf {
  from { background-color: rgba(0,0,0,0); }
  to { background-color: rgba(0,0,0,0.5); }
}
@-moz-keyframes fadeInHalf {
  from { background-color: rgba(0,0,0,0); }
  to { background-color: rgba(0,0,0,0.5); }
}
@keyframes fadeInHalf {
  from { background-color: rgba(0,0,0,0); }
  to { background-color: rgba(0,0,0,0.5); }
}


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

@-webkit-keyframes fadeOutHalf {
  from { background-color: rgba(0,0,0,0.5); }
  to { background-color: rgba(0,0,0,0); }
}
@-moz-keyframes fadeOutHalf {
  from { background-color: rgba(0,0,0,0.5); }
  to { background-color: rgba(0,0,0,0); }
}
@keyframes fadeOutHalf {
  from { background-color: rgba(0,0,0,0.5); }
  to { background-color: rgba(0,0,0,0); }
}

// Scale Out
// Scale from hero (1 in this case) to zero
// -------------------------------

@-webkit-keyframes scaleOut {
  from { -webkit-transform: scale(1); opacity: 1; }
  to { -webkit-transform: scale(0.8); opacity: 0; }
}
@-moz-keyframes scaleOut {
  from { -moz-transform: scale(1); opacity: 1; }
  to { -moz-transform: scale(0.8); opacity: 0; }
}
@keyframes scaleOut {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(0.8); opacity: 0; }
}

// Scale In
// Scale from 0 to hero (1 in this case)
// -------------------------------

@-webkit-keyframes scaleIn {
  from { -webkit-transform: scale(0); }
  to { -webkit-transform: scale(1); }
}
@-moz-keyframes scaleIn {
  from { -moz-transform: scale(0); }
  to { -moz-transform: scale(1); }
}
@keyframes scaleIn {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

// Super Scale In
// Scale from super (1.x) to duper (1 in this case)
// -------------------------------

@-webkit-keyframes superScaleIn {
  from { -webkit-transform: scale(1.2); opacity: 0; }
  to { -webkit-transform: scale(1); opacity: 1 }
}
@-moz-keyframes superScaleIn {
  from { -moz-transform: scale(1.2); opacity: 0; }
  to { -moz-transform: scale(1); opacity: 1; }
}
@keyframes superScaleIn {
  from { transform: scale(1.2); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

// Spin
// -------------------------------

@-webkit-keyframes spin {
  100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spin {
  100% { -moz-transform: rotate(360deg); }
}
@keyframes spin {
  100% { transform: rotate(360deg); }
}


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

@-webkit-keyframes flash {
  from { opacity: .5; }
  to { opacity: 1; }
}
@-moz-keyframes flash {
  from { opacity: .5; }
  to { opacity: 1; }
}
@keyframes flash {
  from { opacity: .5; }
  to { opacity: 1; }
}