https://github.com/sha-red/compass-mixins/tree/master/lib
extended with more sass frameworks and as django app.
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
1.5 KiB
59 lines
1.5 KiB
12 years ago
|
// ---------------------------------------------------------------------------
|
||
|
|
@include keyframes(rotateOut) {
|
||
|
|
0% {
|
||
|
|
@include transform-origin(center center);
|
||
|
|
@include rotate(0);
|
||
|
|
opacity: 1; }
|
||
|
|
100% {
|
||
|
|
@include transform-origin(center center);
|
||
|
|
@include rotate(200deg);
|
||
|
|
opacity: 0; } }
|
||
|
|
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
@include keyframes(rotateOutDownLeft) {
|
||
|
|
0% {
|
||
|
|
@include transform-origin(left bottom);
|
||
|
|
@include rotate(0);
|
||
|
|
opacity: 1; }
|
||
|
|
100% {
|
||
|
|
@include transform-origin(left bottom);
|
||
|
|
@include rotate(90deg);
|
||
|
|
opacity: 0; } }
|
||
|
|
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
@include keyframes(rotateOutUpLeft) {
|
||
|
|
0% {
|
||
|
|
@include transform-origin(left bottom);
|
||
|
|
@include rotate(0);
|
||
|
|
opacity: 1; }
|
||
|
|
100% {
|
||
|
|
@include transform-origin(left bottom);
|
||
|
|
@include rotate(-90deg);
|
||
|
|
opacity: 0; } }
|
||
|
|
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
@include keyframes(rotateOutDownRight) {
|
||
|
|
0% {
|
||
|
|
@include transform-origin(right bottom);
|
||
|
|
@include rotate(0);
|
||
|
|
opacity: 1; }
|
||
|
|
100% {
|
||
|
|
@include transform-origin(right bottom);
|
||
|
|
@include rotate(-90deg);
|
||
|
|
opacity: 0; } }
|
||
|
|
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
@include keyframes(rotateOutUpRight) {
|
||
|
|
0% {
|
||
|
|
@include transform-origin(right bottom);
|
||
|
|
@include rotate(0);
|
||
|
|
opacity: 1; }
|
||
|
|
100% {
|
||
|
|
@include transform-origin(right bottom);
|
||
|
|
@include rotate(90deg);
|
||
|
|
opacity: 0; } }
|