Skip to content

Instantly share code, notes, and snippets.

@daphotron

daphotron/SassMeister-input.scss

Created May 27, 2014 21:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save daphotron/00541f3a08ffd90d89ec to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save daphotron/00541f3a08ffd90d89ec to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----
@import "compass";
@mixin keyframes($animationName) {
@-webkit-keyframes #{$animationName} {
@content;
}
@-moz-keyframes #{$animationName} {
@content;
}
@-o-keyframes #{$animationName} {
@content;
}
@keyframes #{$animationName} {
@content;
}
}
@include keyframes(slide-in-out) {
0% { top: -5em; }
10% { top: -0.5em; }
14% { top: -1.5em; }
18% { top: -1em; }
40% { top: -1em; }
60% { top: -1em; }
80% { top: -1em; }
94% { top: 0; }
100% { top: -5em; }
}
@include keyframes(slide-in) {
0% { top: -5em; }
10% { top: -0.5em; }
14% { top: -1.5em; }
18% { top: -1em; }
100% { top: -1em; }
}
@include keyframes(flashy) {
0% { background: #ffff8e; }
20% { background: lighten(#ffff8e,5%); }
40% { background: lighten(#ffff8e,15%); }
60% { background: lighten(#ffff8e,20%); }
80% { background: lighten(#ffff8e,50%); }
100% { background: #fff; }
}
@include keyframes(loading) {
0% {
-webkit-transform: translateX(-400%) rotate(-360deg);
-ms-transform: translateX(-400%) rotate(-360deg);
transform: translateX(-400%) rotate(-360deg);
}
50% {
-webkit-transform: translateX(400%) rotate(0deg);
-ms-transform: translateX(400%) rotate(0deg);
transform: translateX(400%) rotate(0deg);
}
100% {
-webkit-transform: translateX(-400%) rotate(-360deg);
-ms-transform: translateX(-400%) rotate(-360deg);
transform: translateX(-400%) rotate(-360deg);
}
}
.item {
margin: 0 0 0.8em;
padding: 0.5em 0.6em;
}
.item:before {
background-color: #000;
background-image: url('https://dl.dropboxusercontent.com/u/278724554/bball.png');
background-repeat: no-repeat;
@include border-radius(100%);
content: " ";
height: 19px;
left: 6em;
position: absolute;
top: 0.65em;
width: 19px;
z-index: 1;
}
.bg-flash {
@include animation('flashy 3s linear 0s 1');
}
.flash {
@include animation('slide-in-out 3s linear 0s 1');
}
.flash-permanent {
@include animation('slide-in 2s linear 0s 1');
}
.loading:before {
@include animation('loading 3s infinite ease-in-out');
}
.spin:before {
@include animation('spin 0.6s infinite linear');
}
Raw
SassMeister-output.css
@-webkit-keyframes slide-in-out {
0% {
top: -5em;
}
10% {
top: -0.5em;
}
14% {
top: -1.5em;
}
18% {
top: -1em;
}
40% {
top: -1em;
}
60% {
top: -1em;
}
80% {
top: -1em;
}
94% {
top: 0;
}
100% {
top: -5em;
}
}
@-moz-keyframes slide-in-out {
0% {
top: -5em;
}
10% {
top: -0.5em;
}
14% {
top: -1.5em;
}
18% {
top: -1em;
}
40% {
top: -1em;
}
60% {
top: -1em;
}
80% {
top: -1em;
}
94% {
top: 0;
}
100% {
top: -5em;
}
}
@-o-keyframes slide-in-out {
0% {
top: -5em;
}
10% {
top: -0.5em;
}
14% {
top: -1.5em;
}
18% {
top: -1em;
}
40% {
top: -1em;
}
60% {
top: -1em;
}
80% {
top: -1em;
}
94% {
top: 0;
}
100% {
top: -5em;
}
}
@keyframes slide-in-out {
0% {
top: -5em;
}
10% {
top: -0.5em;
}
14% {
top: -1.5em;
}
18% {
top: -1em;
}
40% {
top: -1em;
}
60% {
top: -1em;
}
80% {
top: -1em;
}
94% {
top: 0;
}
100% {
top: -5em;
}
}
@-webkit-keyframes slide-in {
0% {
top: -5em;
}
10% {
top: -0.5em;
}
14% {
top: -1.5em;
}
18% {
top: -1em;
}
100% {
top: -1em;
}
}
@-moz-keyframes slide-in {
0% {
top: -5em;
}
10% {
top: -0.5em;
}
14% {
top: -1.5em;
}
18% {
top: -1em;
}
100% {
top: -1em;
}
}
@-o-keyframes slide-in {
0% {
top: -5em;
}
10% {
top: -0.5em;
}
14% {
top: -1.5em;
}
18% {
top: -1em;
}
100% {
top: -1em;
}
}
@keyframes slide-in {
0% {
top: -5em;
}
10% {
top: -0.5em;
}
14% {
top: -1.5em;
}
18% {
top: -1em;
}
100% {
top: -1em;
}
}
@-webkit-keyframes flashy {
0% {
background: #ffff8e;
}
20% {
background: #ffffa8;
}
40% {
background: #ffffdb;
}
60% {
background: #fffff4;
}
80% {
background: white;
}
100% {
background: #fff;
}
}
@-moz-keyframes flashy {
0% {
background: #ffff8e;
}
20% {
background: #ffffa8;
}
40% {
background: #ffffdb;
}
60% {
background: #fffff4;
}
80% {
background: white;
}
100% {
background: #fff;
}
}
@-o-keyframes flashy {
0% {
background: #ffff8e;
}
20% {
background: #ffffa8;
}
40% {
background: #ffffdb;
}
60% {
background: #fffff4;
}
80% {
background: white;
}
100% {
background: #fff;
}
}
@keyframes flashy {
0% {
background: #ffff8e;
}
20% {
background: #ffffa8;
}
40% {
background: #ffffdb;
}
60% {
background: #fffff4;
}
80% {
background: white;
}
100% {
background: #fff;
}
}
@-webkit-keyframes loading {
0% {
-webkit-transform: translateX(-400%) rotate(-360deg);
-ms-transform: translateX(-400%) rotate(-360deg);
transform: translateX(-400%) rotate(-360deg);
}
50% {
-webkit-transform: translateX(400%) rotate(0deg);
-ms-transform: translateX(400%) rotate(0deg);
transform: translateX(400%) rotate(0deg);
}
100% {
-webkit-transform: translateX(-400%) rotate(-360deg);
-ms-transform: translateX(-400%) rotate(-360deg);
transform: translateX(-400%) rotate(-360deg);
}
}
@-moz-keyframes loading {
0% {
-webkit-transform: translateX(-400%) rotate(-360deg);
-ms-transform: translateX(-400%) rotate(-360deg);
transform: translateX(-400%) rotate(-360deg);
}
50% {
-webkit-transform: translateX(400%) rotate(0deg);
-ms-transform: translateX(400%) rotate(0deg);
transform: translateX(400%) rotate(0deg);
}
100% {
-webkit-transform: translateX(-400%) rotate(-360deg);
-ms-transform: translateX(-400%) rotate(-360deg);
transform: translateX(-400%) rotate(-360deg);
}
}
@-o-keyframes loading {
0% {
-webkit-transform: translateX(-400%) rotate(-360deg);
-ms-transform: translateX(-400%) rotate(-360deg);
transform: translateX(-400%) rotate(-360deg);
}
50% {
-webkit-transform: translateX(400%) rotate(0deg);
-ms-transform: translateX(400%) rotate(0deg);
transform: translateX(400%) rotate(0deg);
}
100% {
-webkit-transform: translateX(-400%) rotate(-360deg);
-ms-transform: translateX(-400%) rotate(-360deg);
transform: translateX(-400%) rotate(-360deg);
}
}
@keyframes loading {
0% {
-webkit-transform: translateX(-400%) rotate(-360deg);
-ms-transform: translateX(-400%) rotate(-360deg);
transform: translateX(-400%) rotate(-360deg);
}
50% {
-webkit-transform: translateX(400%) rotate(0deg);
-ms-transform: translateX(400%) rotate(0deg);
transform: translateX(400%) rotate(0deg);
}
100% {
-webkit-transform: translateX(-400%) rotate(-360deg);
-ms-transform: translateX(-400%) rotate(-360deg);
transform: translateX(-400%) rotate(-360deg);
}
}
.item {
margin: 0 0 0.8em;
padding: 0.5em 0.6em;
}
.item:before {
background-color: #000;
background-image: url("https://dl.dropboxusercontent.com/u/278724554/bball.png");
background-repeat: no-repeat;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
content: " ";
height: 19px;
left: 6em;
position: absolute;
top: 0.65em;
width: 19px;
z-index: 1;
}
.bg-flash {
-moz-animation: "flashy 3s linear 0s 1";
-webkit-animation: "flashy 3s linear 0s 1";
animation: "flashy 3s linear 0s 1";
}
.flash {
-moz-animation: "slide-in-out 3s linear 0s 1";
-webkit-animation: "slide-in-out 3s linear 0s 1";
animation: "slide-in-out 3s linear 0s 1";
}
.flash-permanent {
-moz-animation: "slide-in 2s linear 0s 1";
-webkit-animation: "slide-in 2s linear 0s 1";
animation: "slide-in 2s linear 0s 1";
}
.loading:before {
-moz-animation: "loading 3s infinite ease-in-out";
-webkit-animation: "loading 3s infinite ease-in-out";
animation: "loading 3s infinite ease-in-out";
}
.spin:before {
-moz-animation: "spin 0.6s infinite linear";
-webkit-animation: "spin 0.6s infinite linear";
animation: "spin 0.6s infinite linear";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment