Created
July 15, 2014 13:57
-
-
Save ezekg/8daca0254873d279712d to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.4.0.rc.1) | |
// Compass (v1.0.0.alpha.20) | |
// ---- | |
// List of animations | |
// ---- | |
$animations: ( | |
"bounce-in": false, | |
"bounce-out": false, | |
"slide-in": false, | |
"slide-out": false, | |
) !global; | |
// Mixin to activate keyframe and extend placeholder | |
// ---- | |
@mixin animation($animation) { | |
@if map-has-key($animations, "#{$animation}") { | |
$animations: map-merge($animations, ("#{$animation}": true)) !global; | |
} | |
@extend %#{$animation} !optional; | |
} | |
// Placeholder | |
// ---- | |
%bounce-in { | |
animation: bounce-in 1s linear; | |
} | |
animate { | |
@include animation('bounce-in'); | |
actives: inspect($animations); | |
} | |
// Keyframe that relies on animation being true | |
// ---- | |
// This should go underneath the mixin call; so should be in | |
// a seperate file, maybe called _keyframes.scss, etc. | |
// Also should be loaded in _after_ the animation is | |
// included in the file. | |
// ---- | |
// @example: _animations.scss > _keyframes.scss | |
// ---- | |
@if map-get($animations, "bounce-in") { | |
@keyframes bounce-in { | |
0%, 20%, 50%, 80%, 100% { transform: translateY(0); } | |
40% { transform: translateY(-30px); } | |
60% { transform: translateY(-15px); } | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
animate { | |
animation: bounce-in 1s linear; | |
} | |
animate { | |
actives: ("bounce-in": true, "bounce-out": false, "slide-in": false, "slide-out": false); | |
} | |
@keyframes bounce-in { | |
0%, 20%, 50%, 80%, 100% { | |
transform: translateY(0); | |
} | |
40% { | |
transform: translateY(-30px); | |
} | |
60% { | |
transform: translateY(-15px); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment