Skip to content

Instantly share code, notes, and snippets.

@jakob-e

jakob-e/_animate.scss

Last active December 12, 2015 14:55
Show Gist options
  • Save jakob-e/8ab58aef1a4e559b57e6 to your computer and use it in GitHub Desktop.
Save jakob-e/8ab58aef1a4e559b57e6 to your computer and use it in GitHub Desktop.
Download ZIP
SCSS mixin based on Animate.css (Autoprefixer required)
Raw
_animate.scss
// -----------------------------------------------------------------------
//
// SCSS mixin based on Animate.css
//
// Animate.css http://daneden.github.io/animate.css
// Licensed under the MIT license - http://opensource.org/licenses/MIT
// Copyright (c) 2015 Daniel Eden
//
// -----------------------------------------------------------------------
//
// Syntax:
// @include animate-css($type, [$duration, $repeat]);
//
// Requirements: Autoprefixer
//
// Notes:
// @keyframes will boubble why extend placeholders will
// cause keyframes to be printed – even if not used.
//
// To avoid class dependencies the classes .animate and
// .infinite has been removed. .animate values comes
// with each include and .infinite can be set by passing
// $repeat: infinite
//
// Type values:
// bounce
// flash
// pulse
// rubberBand
// shake
// headShake
// swing
// tada
// wobble
// jello
// bounceIn
// bounceInDown
// bounceInLeft
// bounceInRight
// bounceInUp
// bounceOut
// bounceOutDown
// bounceOutLeft
// bounceOutRight
// bounceOutUp
// fadeIn
// fadeInDown
// fadeInDownBig
// fadeInLeft
// fadeInLeftBig
// fadeInRight
// fadeInRightBig
// fadeInUp
// fadeInUpBig
// fadeOut
// fadeOutDown
// fadeOutDownBig
// fadeOutLeft
// fadeOutLeftBig
// fadeOutRight
// fadeOutRightBig
// fadeOutUp
// fadeOutUpBig
// flipInX
// flipInY
// flipOutX
// flipOutY
// lightSpeedIn
// lightSpeedOut
// rotateIn
// rotateInDownLeft
// rotateInDownRight
// rotateInUpLeft
// rotateInUpRight
// rotateOut
// rotateOutDownLeft
// rotateOutDownRight
// rotateOutUpLeft
// rotateOutUpRight
// hinge
// rollIn
// rollOut
// zoomIn
// zoomInDown
// zoomInLeft
// zoomInRight
// zoomInUp
// zoomOut
// zoomOutDown
// zoomOutLeft
// zoomOutRight
// zoomOutUp
// slideInDown
// slideInLeft
// slideInRight
// slideInUp
// slideOutDown
// slideOutLeft
// slideOutRight
// slideOutUp
//
// -----------------------------------------------------------------------
@mixin animate-css($type, $duration:null, $repeat: null){
// Animation name prefix
$prefix: '';
// Type
animation-name: unquote($prefix + $type);
// Duration
$duration:if(not $duration and index(hinge,$type), 2s, $duration);
$duration:if(not $duration and index(bounceIn bounceOut flipOutX flipOutY,$type), 0.75s, $duration);
animation-duration: $duration or 1s;
// Repeat
animation-iteration-count: if($repeat == infinite, infinite, $repeat);
// Fill mode
animation-fill-mode: both;
// Custom
@if $type == bounce { transform-origin: center bottom; }
@if $type == headShake { animation-timing-function: ease-in-out; }
@if $type == swing { transform-origin: top center; }
@if $type == jello { transform-origin: center; }
@if $type == flip { backface-visibility: visible; }
@if $type == flipInX { backface-visibility: visible !important; }
@if $type == flipInY { backface-visibility: visible !important; }
@if $type == flipOutX { backface-visibility: visible !important; }
@if $type == flipOutY { backface-visibility: visible !important; }
@if $type == lightSpeedIn { animation-timing-function: ease-out; }
@if $type == lightSpeedOut { animation-timing-function: ease-in }
// Keyframes
$keyframerenderonce: if(global-variable-exists(keyframerenderonce), $keyframerenderonce, ()) !global;
@if not index($keyframerenderonce, $type) {
$keyframerenderonce:append($keyframerenderonce, $type) !global;
@keyframes #{$prefix + $type} {
// Attention Seekers
@if $type == bounce {
20%, 53%, 80%, from, to { animation-timing-function: cubic-bezier(0.215, .61, .355, 1); transform: translate3d(0, 0, 0); }
40%, 43% { animation-timing-function: cubic-bezier(0.755, .050, .855, .060); transform: translate3d(0, -30px, 0); }
70% { animation-timing-function: cubic-bezier(0.755, .050, .855, .060); transform: translate3d(0, -15px, 0); }
90% { transform: translate3d(0, -4px, 0); }
}
@if $type == flash {
50%, from, to { opacity: 1; }
25%, 75% { opacity: 0; }
}
@if $type == pulse {
from { transform: scale3d(1, 1, 1); }
50% { transform: scale3d(1.05, 1.05, 1.05); }
to { transform: scale3d(1, 1, 1); }
}
@if $type == rubberBand {
from { transform: scale3d(1, 1, 1); }
30% { transform: scale3d(1.25, .75, 1); }
40% { transform: scale3d(0.75, 1.25, 1); }
50% { transform: scale3d(1.15, .85, 1); }
65% { transform: scale3d(.95, 1.05, 1); }
75% { transform: scale3d(1.05, .95, 1); }
to { transform: scale3d(1, 1, 1); }
}
@if $type == shake {
from, to { transform: translate3d(0, 0, 0); }
10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); }
20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); }
}
@if $type == headShake {
0% { transform: translateX(0); }
6.5% { transform: translateX(-6px) rotateY(-9deg); }
18.5% { transform: translateX(5px) rotateY(7deg); }
31.5% { transform: translateX(-3px) rotateY(-5deg); }
43.5% { transform: translateX(2px) rotateY(3deg); }
50% { transform: translateX(0); }
}
@if $type == swing {
20% { transform: rotate3d(0, 0, 1, 15deg); }
40% { transform: rotate3d(0, 0, 1, -10deg); }
60% { transform: rotate3d(0, 0, 1, 5deg); }
80% { transform: rotate3d(0, 0, 1, -5deg); }
to { transform: rotate3d(0, 0, 1, 0deg); }
}
@if $type == tada {
from { 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); }
to { transform: scale3d(1, 1, 1); }
}
@if $type == wobble {
from { transform: none; }
15% { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
30% { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
45% { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
60% { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
75% { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
to { transform: none }
}
@if $type == jello {
11.1%, from, to { transform: none; }
22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
66.6% { transform: skewX(-.78125deg) skewY(-.78125deg); }
77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }
88.8% { transform: skewX(-.1953125deg) skewY(-.1953125deg); }
}
// Bouncing Entrances
@if $type == bounceIn {
20%, 40%, 60%, 80%, from, to { animation-timing-function: cubic-bezier(0.215, .61, .355, 1); }
0% { opacity: 0; transform: scale3d(.3, .3, .3); }
20% { transform: scale3d(1.1, 1.1, 1.1); }
40% { transform: scale3d(.9, .9, .9); }
60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
80% { transform: scale3d(.97, .97, .97); }
to { opacity: 1; transform: scale3d(1, 1, 1); }
}
@if $type == bounceInDown {
60%, 75%, 90%, from, to { animation-timing-function: cubic-bezier(0.215, .61, .355, 1); }
0% { opacity: 0; transform: translate3d(0, -3000px, 0); }
60% { opacity: 1; transform: translate3d(0, 25px, 0); }
75% { transform: translate3d(0, -10px, 0); }
90% { transform: translate3d(0, 5px, 0); }
to { transform: none }
}
@if $type == bounceInLeft {
60%, 75%, 90%, from, to { animation-timing-function: cubic-bezier(0.215, .61, .355, 1); }
0% { opacity: 0; transform: translate3d(-3000px, 0, 0); }
60% { opacity: 1; transform: translate3d(25px, 0, 0); }
75% { transform: translate3d(-10px, 0, 0); }
90% { transform: translate3d(5px, 0, 0); }
to { transform: none }
}
@if $type == bounceInRight {
60%, 75%, 90%, from, to { animation-timing-function: cubic-bezier(0.215, .61, .355, 1); }
from { opacity: 0; transform: translate3d(3000px, 0, 0); }
60% { opacity: 1; transform: translate3d(-25px, 0, 0); }
75% { transform: translate3d(10px, 0, 0); }
90% { transform: translate3d(-5px, 0, 0); }
to { transform: none }
}
@if $type == bounceInUp {
60%, 75%, 90%, from, to { animation-timing-function: cubic-bezier(0.215, .61, .355, 1); }
from { opacity: 0; transform: translate3d(0, 3000px, 0); }
60% { opacity: 1; transform: translate3d(0, -20px, 0); }
75% { transform: translate3d(0, 10px, 0); }
90% { transform: translate3d(0, -5px, 0); }
to { transform: translate3d(0, 0, 0); }
}
// Bouncing Exits
@if $type == bounceOut {
20% { transform: scale3d(.9, .9, .9); }
50%, 55% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); }
to { opacity: 0; transform: scale3d(.3, .3, .3); }
}
@if $type == bounceOutDown {
20% { transform: translate3d(0, 10px, 0); }
40%, 45% { opacity: 1; transform: translate3d(0, -20px, 0); }
to { opacity: 0; transform: translate3d(0, 2000px, 0); }
}
@if $type == bounceOutLeft {
20% { opacity: 1; transform: translate3d(20px, 0, 0); }
to { opacity: 0; transform: translate3d(-2000px, 0, 0); }
}
@if $type == bounceOutRight {
20% { opacity: 1; transform: translate3d(-20px, 0, 0); }
to { opacity: 0; transform: translate3d(2000px, 0, 0); }
}
@if $type == bounceOutUp {
20% { transform: translate3d(0, -10px, 0); }
40%, 45% { opacity: 1; transform: translate3d(0, 20px, 0); }
to { opacity: 0; transform: translate3d(0, -2000px, 0); }
}
// Fading Entrances
@if $type == fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@if $type == fadeInDown {
from { opacity: 0; transform: translate3d(0, -100%, 0); }
to { opacity: 1; transform: none; }
}
@if $type == fadeInDownBig {
from { opacity: 0; transform: translate3d(0, -2000px, 0); }
to { opacity: 1; transform: none; }
}
@if $type == fadeInLeft {
from { opacity: 0; transform: translate3d(-100%, 0, 0); }
to { opacity: 1; transform: none; }
}
@if $type == fadeInLeftBig {
from { opacity: 0; transform: translate3d(-2000px, 0, 0); }
to { opacity: 1; transform: none; }
}
@if $type == fadeInRight {
from { opacity: 0; transform: translate3d(100%, 0, 0); }
to { opacity: 1; transform: none; }
}
@if $type == fadeInRightBig {
from { opacity: 0; transform: translate3d(2000px, 0, 0); }
to { opacity: 1; transform: none; }
}
@if $type == fadeInUp {
from { opacity: 0; transform: translate3d(0, 100%, 0); }
to { opacity: 1; transform: none; }
}
@if $type == fadeInUpBig {
from { opacity: 0; transform: translate3d(0, 2000px, 0); }
to { opacity: 1; transform: none; }
}
// Fading Exits
@if $type == fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
@if $type == fadeOutDown {
from { opacity: 1; }
to { opacity: 0; transform: translate3d(0, 100%, 0); }
}
@if $type == fadeOutDownBig {
from { opacity: 1; }
to { opacity: 0; transform: translate3d(0, 2000px, 0); }
}
@if $type == fadeOutLeft {
from { opacity: 1; }
to { opacity: 0; transform: translate3d(-100%, 0, 0); }
}
@if $type == fadeOutLeftBig {
from { opacity: 1; }
to { opacity: 0; transform: translate3d(-2000px, 0, 0); }
}
@if $type == fadeOutRight {
from { opacity: 1; }
to { opacity: 0; transform: translate3d(100%, 0, 0); }
}
@if $type == fadeOutRightBig {
from { opacity: 1; }
to { opacity: 0; transform: translate3d(2000px, 0, 0); }
}
@if $type == fadeOutUp {
from { opacity: 1; }
to { opacity: 0; transform: translate3d(0, -100%, 0); }
}
@if $type == fadeOutUpBig {
from { opacity: 1; }
to { opacity: 0; transform: translate3d(0, -2000px, 0); }
}
// Flippers
@if $type == flip {
from { transform: perspective(400px) rotate3d(0, 1, 0, -360deg); animation-timing-function: ease-out; }
40% { transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); animation-timing-function: ease-out; }
50% { transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); animation-timing-function: ease-in; }
80% { transform: perspective(400px) scale3d(.95, .95, .95); animation-timing-function: ease-in; }
to { transform: perspective(400px); animation-timing-function: ease-in; }
}
@if $type == flipInX {
from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; }
40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; }
60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; }
80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
to { transform: perspective(400px); }
}
@if $type == flipInY {
from { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); animation-timing-function: ease-in; opacity: 0; }
40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); animation-timing-function: ease-in; }
60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; }
80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
to { transform: perspective(400px); }
}
@if $type == flipOutX {
from { transform: perspective(400px); }
30% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; }
to { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); ; opacity: 0; }
}
@if $type == flipOutY {
from { transform: perspective(400px); }
30% { transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; }
to { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; }
}
// Lightspeed
@if $type == lightSpeedIn {
from { transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; }
60% { transform: skewX(20deg); opacity: 1; }
80% { transform: skewX(-5deg); opacity: 1; }
to { transform: none; opacity: 1; }
}
@if $type == lightSpeedOut {
from { opacity: 1 }
to { transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; }
}
// Rotating Entrances
@if $type == rotateIn {
from { transform-origin: center; transform: rotate3d(0, 0, 1, -200deg); ; opacity: 0 }
to { transform-origin: center; transform: none; opacity: 1 }
}
@if $type == rotateInDownLeft {
from { transform-origin: left bottom; transform: rotate3d(0, 0, 1, -45deg); ; opacity: 0; }
to { transform-origin: left bottom; transform: none; opacity: 1; }
}
@if $type == rotateInDownRight {
from { transform-origin: right bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; }
to { transform-origin: right bottom; transform: none; opacity: 1; }
}
@if $type == rotateInUpLeft {
from { transform-origin: left bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; }
to { transform-origin: left bottom; transform: none; opacity: 1; }
}
@if $type == rotateInUpRight {
from { transform-origin: right bottom; transform: rotate3d(0, 0, 1, -90deg); opacity: 0; }
to { transform-origin: right bottom; transform: none; opacity: 1; }
}
// Rotating Exits
@if $type == rotateOut {
from { transform-origin: center; opacity: 1; }
to { transform-origin: center; transform: rotate3d(0, 0, 1, 200deg); opacity: 0; }
}
@if $type == rotateOutDownLeft {
from { transform-origin: left bottom; opacity: 1; }
to { transform-origin: left bottom; transform: rotate3d(0, 0, 1, 45deg); ; opacity: 0; }
}
@if $type == rotateOutDownRight {
from { transform-origin: right bottom; opacity: 1; }
to { transform-origin: right bottom; transform: rotate3d(0, 0, 1, -45deg); ; opacity: 0; }
}
@if $type == rotateOutUpLeft {
from { transform-origin: left bottom; opacity: 1; }
to { transform-origin: left bottom; transform: rotate3d(0, 0, 1, -45deg); ; opacity: 0; }
}
@if $type == rotateOutUpRight {
from { transform-origin: right bottom; opacity: 1; }
to { transform-origin: right bottom; transform: rotate3d(0, 0, 1, 90deg); ; opacity: 0; }
}
// Sliding Entrances
@if $type == slideInDown {
from { transform: translate3d(0, -100%, 0); visibility: visible; }
to { transform: translate3d(0, 0, 0); }
}
@if $type == slideInLeft {
from { transform: translate3d(-100%, 0, 0); visibility: visible; }
to { transform: translate3d(0, 0, 0); }
}
@if $type == slideInRight {
from { transform: translate3d(100%, 0, 0); visibility: visible; }
to { transform: translate3d(0, 0, 0); }
}
@if $type == slideInUp {
from { transform: translate3d(0, 100%, 0); visibility: visible; }
to { transform: translate3d(0, 0, 0); }
}
// Sliding Exits
@if $type == slideOutUp {
from { transform: translate3d(0, 0, 0); }
to { visibility: hidden; transform: translate3d(0, -100%, 0); }
}
@if $type == slideOutDown {
from { transform: translate3d(0, 0, 0); }
to { visibility: hidden; transform: translate3d(0, 100%, 0); }
}
@if $type == slideOutLeft {
from { transform: translate3d(0, 0, 0); }
to { visibility: hidden; transform: translate3d(-100%, 0, 0); }
}
@if $type == slideOutRight {
from { transform: translate3d(0, 0, 0); }
to { visibility: hidden; transform: translate3d(1800%, 0, 0); }
}
// Zoom Entrances
@if $type == zoomIn {
from { opacity: 0; transform: scale3d(.3, .3, .3); }
50% { opacity: 1; }
}
@if $type == zoomInDown {
from { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); animation-timing-function: cubic-bezier(0.55, .055, .675, .19); }
60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.175, .885, .32, 1); }
}
@if $type == zoomInLeft {
from { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); animation-timing-function: cubic-bezier(0.55, .055, .675, .19); }
60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); animation-timing-function: cubic-bezier(0.175, .885, .32, 1); }
}
@if $type == zoomInRight {
from { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); animation-timing-function: cubic-bezier(0.55, .055, .675, .19); }
60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); animation-timing-function: cubic-bezier(0.175, .885, .32, 1); }
}
@if $type == zoomInUp {
from { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); animation-timing-function: cubic-bezier(0.55, .055, .675, .19); }
60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.175, .885, .32, 1); }
}
// Zoom Exits
@if $type == zoomOut {
from { opacity: 1; }
50% { opacity: 0; transform: scale3d(.3, .3, .3); }
to { opacity: 0; }
}
@if $type == zoomOutDown {
40% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.55, .055, .675, .19); }
to { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(0.175, .885, .32, 1); }
}
@if $type == zoomOutLeft {
40% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); }
to { opacity: 0; transform: scale(.1) translate3d(-2000px, 0, 0); transform-origin: left center; }
}
@if $type == zoomOutRight {
40% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); }
to { opacity: 0; transform: scale(.1) translate3d(2000px, 0, 0); transform-origin: right center; }
}
@if $type == zoomOutUp {
40% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.55, .055, .675, .19); }
to { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(0.175, .885, .32, 1); }
}
// Specials
@if $type == hinge {
0% { transform-origin: top left; animation-timing-function: ease-in-out }
20%, 60% { transform: rotate3d(0, 0, 1, 80deg); ; transform-origin: top left; animation-timing-function: ease-in-out }
40%, 80% { transform: rotate3d(0, 0, 1, 60deg); ; transform-origin: top left; animation-timing-function: ease-in-out; opacity: 1 }
to { transform: translate3d(0, 700px, 0); ; opacity: 0; }
}
@if $type == rollIn {
from { opacity: 0; transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
to { opacity: 1; transform: none; }
}
@if $type == rollOut {
from { opacity: 1; }
to { opacity: 0; transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); }
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment