Skip to content

Instantly share code, notes, and snippets.

@beauxjames-ZZ

beauxjames-ZZ/ SASS Keyframes

Last active August 29, 2015 14:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save beauxjames-ZZ/554597ba07c49dbd92ce to your computer and use it in GitHub Desktop.
Save beauxjames-ZZ/554597ba07c49dbd92ce to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SASS Keyframes
Automation of keyframe creation for SASS.
Raw
SassMeister-input-HTML.html
<div class="wrapper">
<button class="glow">Look at Me!</button>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----
@import "compass";
@mixin makeKeyframes($keyFrameName) {
@-webkit-keyframes #{$keyFrameName}{
$browser: '-webkit-';
@content;
}
@-moz-keyframes #{$keyFrameName}{
$browser: '-moz-';
@content;
}
@-o-keyframes #{$keyFrameName}{
$browser: '-o-';
@content;
}
@keyframes #{$keyFrameName}{
$browser: '';
@content;
}
} $browser: null;
@mixin setKeyframeType($animationName, $animationDuration, $iterationCount) {
@each $browserType in '-webkit-', '-moz-', '-ms-', '-o-', '' {
#{$browserType + 'animation-duration'}: #{$animationDuration};
#{$browserType + 'animation-iteration-count'}: #{$iterationCount};
#{$browserType + 'animation-name'}: #{$animationName};
}
}
$glowBaseColor: #d64040;
$glowToColor: saturate(lighten($glowBaseColor, 10), 50);
@include makeKeyframes('badgeGlow') {
from { @include box-shadow(0px 0px 10px rgba($glowToColor, 0.3), 0px 1px 2px rgba(0, 0, 0, .80));color:$glowBaseColor;border-color: $glowBaseColor;}
50% { @include box-shadow(0px 0px 16px rgba($glowToColor, 0.8), 0px 1px 2px rgba(0, 0, 0, .80));color:white;border-color: lighten($glowBaseColor, 20);}
to { @include box-shadow(0px 0px 10px rgba($glowToColor, 0.3), 0px 1px 2px rgba(0, 0, 0, .80));color:$glowBaseColor;border-color: $glowBaseColor;}
}
.wrapper { width: 100%; margin-top: 20px;text-align:center; }
button { padding: 3em 5em; font-weight: bold;font-size:1.4em; }
button.glow {
@include setKeyframeType('badgeGlow',1.5s,infinite);
}
Raw
SassMeister-output.css
@-webkit-keyframes badgeGlow {
from {
-moz-box-shadow: 0px 0px 10px rgba(255, 74, 74, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 10px rgba(255, 74, 74, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(255, 74, 74, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.8);
color: #d64040;
border-color: #d64040;
}
50% {
-moz-box-shadow: 0px 0px 16px rgba(255, 74, 74, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 16px rgba(255, 74, 74, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 16px rgba(255, 74, 74, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.8);
color: white;
border-color: #e89494;
}
to {
-moz-box-shadow: 0px 0px 10px rgba(255, 74, 74, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 10px rgba(255, 74, 74, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(255, 74, 74, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.8);
color: #d64040;
border-color: #d64040;
}
}
@-moz-keyframes badgeGlow {
from {
-moz-box-shadow: 0px 0px 10px rgba(255, 74, 74, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 10px rgba(255, 74, 74, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(255, 74, 74, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.8);
color: #d64040;
border-color: #d64040;
}
50% {
-moz-box-shadow: 0px 0px 16px rgba(255, 74, 74, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 16px rgba(255, 74, 74, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 16px rgba(255, 74, 74, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.8);
color: white;
border-color: #e89494;
}
to {
-moz-box-shadow: 0px 0px 10px rgba(255, 74, 74, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 10px rgba(255, 74, 74, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(255, 74, 74, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.8);
color: #d64040;
border-color: #d64040;
}
}
@-o-keyframes badgeGlow {
from {
-moz-box-shadow: 0px 0px 10px rgba(255, 74, 74, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 10px rgba(255, 74, 74, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(255, 74, 74, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.8);
color: #d64040;
border-color: #d64040;
}
50% {
-moz-box-shadow: 0px 0px 16px rgba(255, 74, 74, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 16px rgba(255, 74, 74, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 16px rgba(255, 74, 74, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.8);
color: white;
border-color: #e89494;
}
to {
-moz-box-shadow: 0px 0px 10px rgba(255, 74, 74, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 10px rgba(255, 74, 74, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(255, 74, 74, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.8);
color: #d64040;
border-color: #d64040;
}
}
@keyframes badgeGlow {
from {
-moz-box-shadow: 0px 0px 10px rgba(255, 74, 74, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 10px rgba(255, 74, 74, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(255, 74, 74, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.8);
color: #d64040;
border-color: #d64040;
}
50% {
-moz-box-shadow: 0px 0px 16px rgba(255, 74, 74, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 16px rgba(255, 74, 74, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 16px rgba(255, 74, 74, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.8);
color: white;
border-color: #e89494;
}
to {
-moz-box-shadow: 0px 0px 10px rgba(255, 74, 74, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 10px rgba(255, 74, 74, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(255, 74, 74, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.8);
color: #d64040;
border-color: #d64040;
}
}
.wrapper {
width: 100%;
margin-top: 20px;
text-align: center;
}
button {
padding: 3em 5em;
font-weight: bold;
font-size: 1.4em;
}
button.glow {
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: badgeGlow;
-moz-animation-duration: 1.5s;
-moz-animation-iteration-count: infinite;
-moz-animation-name: badgeGlow;
-ms-animation-duration: 1.5s;
-ms-animation-iteration-count: infinite;
-ms-animation-name: badgeGlow;
-o-animation-duration: 1.5s;
-o-animation-iteration-count: infinite;
-o-animation-name: badgeGlow;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-name: badgeGlow;
}
Raw
SassMeister-rendered.html
<div class="wrapper">
<button class="glow">Look at Me!</button>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment