Skip to content

Instantly share code, notes, and snippets.

@jannisg
Created October 9, 2012 06:02
Show Gist options
  • Save jannisg/3856910 to your computer and use it in GitHub Desktop.
Save jannisg/3856910 to your computer and use it in GitHub Desktop.
Output of the SASS keyframes mixing. (For debugging purposes)
@-webkit-keyframes reveal {
0% {
opacity: 0;
-webkit-transform: scale(0, 0) rotateZ(0);
-moz-transform: scale(0, 0) rotateZ(0);
-ms-transform: scale(0, 0) rotateZ(0);
-o-transform: scale(0, 0) rotateZ(0);
transform: scale(0, 0) rotateZ(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1, 1) rotateZ(360deg);
-moz-transform: scale(1, 1) rotateZ(360deg);
-ms-transform: scale(1, 1) rotateZ(360deg);
-o-transform: scale(1, 1) rotateZ(360deg);
transform: scale(1, 1) rotateZ(360deg);
}
}
@-moz-keyframes reveal {
0% {
opacity: 0;
-webkit-transform: scale(0, 0) rotateZ(0);
-moz-transform: scale(0, 0) rotateZ(0);
-ms-transform: scale(0, 0) rotateZ(0);
-o-transform: scale(0, 0) rotateZ(0);
transform: scale(0, 0) rotateZ(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1, 1) rotateZ(360deg);
-moz-transform: scale(1, 1) rotateZ(360deg);
-ms-transform: scale(1, 1) rotateZ(360deg);
-o-transform: scale(1, 1) rotateZ(360deg);
transform: scale(1, 1) rotateZ(360deg);
}
}
@-o-keyframes reveal {
0% {
opacity: 0;
-webkit-transform: scale(0, 0) rotateZ(0);
-moz-transform: scale(0, 0) rotateZ(0);
-ms-transform: scale(0, 0) rotateZ(0);
-o-transform: scale(0, 0) rotateZ(0);
transform: scale(0, 0) rotateZ(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1, 1) rotateZ(360deg);
-moz-transform: scale(1, 1) rotateZ(360deg);
-ms-transform: scale(1, 1) rotateZ(360deg);
-o-transform: scale(1, 1) rotateZ(360deg);
transform: scale(1, 1) rotateZ(360deg);
}
}
@keyframes reveal {
0% {
opacity: 0;
-webkit-transform: scale(0, 0) rotateZ(0);
-moz-transform: scale(0, 0) rotateZ(0);
-ms-transform: scale(0, 0) rotateZ(0);
-o-transform: scale(0, 0) rotateZ(0);
transform: scale(0, 0) rotateZ(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1, 1) rotateZ(360deg);
-moz-transform: scale(1, 1) rotateZ(360deg);
-ms-transform: scale(1, 1) rotateZ(360deg);
-o-transform: scale(1, 1) rotateZ(360deg);
transform: scale(1, 1) rotateZ(360deg);
}
}
@-webkit-keyframes reveal {
0% {
opacity: 0;
-webkit-transform: scale(0, 0) rotateZ(0);
-moz-transform: scale(0, 0) rotateZ(0);
-ms-transform: scale(0, 0) rotateZ(0);
-o-transform: scale(0, 0) rotateZ(0);
transform: scale(0, 0) rotateZ(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1, 1) rotateZ(360deg);
-moz-transform: scale(1, 1) rotateZ(360deg);
-ms-transform: scale(1, 1) rotateZ(360deg);
-o-transform: scale(1, 1) rotateZ(360deg);
transform: scale(1, 1) rotateZ(360deg);
}
}
@-moz-keyframes reveal {
0% {
opacity: 0;
-webkit-transform: scale(0, 0) rotateZ(0);
-moz-transform: scale(0, 0) rotateZ(0);
-ms-transform: scale(0, 0) rotateZ(0);
-o-transform: scale(0, 0) rotateZ(0);
transform: scale(0, 0) rotateZ(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1, 1) rotateZ(360deg);
-moz-transform: scale(1, 1) rotateZ(360deg);
-ms-transform: scale(1, 1) rotateZ(360deg);
-o-transform: scale(1, 1) rotateZ(360deg);
transform: scale(1, 1) rotateZ(360deg);
}
}
@-o-keyframes reveal {
0% {
opacity: 0;
-webkit-transform: scale(0, 0) rotateZ(0);
-moz-transform: scale(0, 0) rotateZ(0);
-ms-transform: scale(0, 0) rotateZ(0);
-o-transform: scale(0, 0) rotateZ(0);
transform: scale(0, 0) rotateZ(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1, 1) rotateZ(360deg);
-moz-transform: scale(1, 1) rotateZ(360deg);
-ms-transform: scale(1, 1) rotateZ(360deg);
-o-transform: scale(1, 1) rotateZ(360deg);
transform: scale(1, 1) rotateZ(360deg);
}
}
@keyframes reveal {
0% {
opacity: 0;
-webkit-transform: scale(0, 0) rotateZ(0);
-moz-transform: scale(0, 0) rotateZ(0);
-ms-transform: scale(0, 0) rotateZ(0);
-o-transform: scale(0, 0) rotateZ(0);
transform: scale(0, 0) rotateZ(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1, 1) rotateZ(360deg);
-moz-transform: scale(1, 1) rotateZ(360deg);
-ms-transform: scale(1, 1) rotateZ(360deg);
-o-transform: scale(1, 1) rotateZ(360deg);
transform: scale(1, 1) rotateZ(360deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment