sammy 0.0.1.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/README.md +4 -0
- data/lib/sammy.rb +9 -0
- data/stylesheets/_sammy.sass +3 -0
- data/stylesheets/sammy/_animations.scss +35 -0
- data/stylesheets/sammy/_css3.scss +3 -0
- data/stylesheets/sammy/_shared.scss +2 -0
- data/stylesheets/sammy/_utilities.scss +1 -0
- data/stylesheets/sammy/animations/_attention-seekers.scss +7 -0
- data/stylesheets/sammy/animations/_bouncing-entrances.scss +5 -0
- data/stylesheets/sammy/animations/_bouncing-exits.scss +5 -0
- data/stylesheets/sammy/animations/_fading-entrances.scss +12 -0
- data/stylesheets/sammy/animations/_fading-exits.scss +12 -0
- data/stylesheets/sammy/animations/_flippers.scss +5 -0
- data/stylesheets/sammy/animations/_rotating-entrances.scss +5 -0
- data/stylesheets/sammy/animations/_rotating-exits.scss +5 -0
- data/stylesheets/sammy/animations/_specials.scss +3 -0
- data/stylesheets/sammy/animations/attention-seekers/_bounce.scss +30 -0
- data/stylesheets/sammy/animations/attention-seekers/_flash.scss +28 -0
- data/stylesheets/sammy/animations/attention-seekers/_pulse.scss +28 -0
- data/stylesheets/sammy/animations/attention-seekers/_shake.scss +34 -0
- data/stylesheets/sammy/animations/attention-seekers/_swing.scss +30 -0
- data/stylesheets/sammy/animations/attention-seekers/_tada.scss +34 -0
- data/stylesheets/sammy/animations/attention-seekers/_wobble.scss +32 -0
- data/stylesheets/sammy/animations/bouncing-entrances/_bounceIn.scss +37 -0
- data/stylesheets/sammy/animations/bouncing-entrances/_bounceInDown.scss +37 -0
- data/stylesheets/sammy/animations/bouncing-entrances/_bounceInLeft.scss +37 -0
- data/stylesheets/sammy/animations/bouncing-entrances/_bounceInRight.scss +37 -0
- data/stylesheets/sammy/animations/bouncing-entrances/_bounceInUp.scss +37 -0
- data/stylesheets/sammy/animations/bouncing-exits/_bounceOut.scss +37 -0
- data/stylesheets/sammy/animations/bouncing-exits/_bounceOutDown.scss +34 -0
- data/stylesheets/sammy/animations/bouncing-exits/_bounceOutLeft.scss +34 -0
- data/stylesheets/sammy/animations/bouncing-exits/_bounceOutRight.scss +34 -0
- data/stylesheets/sammy/animations/bouncing-exits/_bounceOutUp.scss +34 -0
- data/stylesheets/sammy/animations/fading-entrances/_fadeIn.scss +25 -0
- data/stylesheets/sammy/animations/fading-entrances/_fadeInDown.scss +31 -0
- data/stylesheets/sammy/animations/fading-entrances/_fadeInDownBig.scss +31 -0
- data/stylesheets/sammy/animations/fading-entrances/_fadeInLeft.scss +31 -0
- data/stylesheets/sammy/animations/fading-entrances/_fadeInLeftBig.scss +31 -0
- data/stylesheets/sammy/animations/fading-entrances/_fadeInRight.scss +31 -0
- data/stylesheets/sammy/animations/fading-entrances/_fadeInRightBig.scss +31 -0
- data/stylesheets/sammy/animations/fading-entrances/_fadeInUp.scss +31 -0
- data/stylesheets/sammy/animations/fading-entrances/_fadeInUpBig.scss +31 -0
- data/stylesheets/sammy/animations/fading-exits/_fadeOut.scss +25 -0
- data/stylesheets/sammy/animations/fading-exits/_fadeOutDown.scss +31 -0
- data/stylesheets/sammy/animations/fading-exits/_fadeOutDownBig.scss +31 -0
- data/stylesheets/sammy/animations/fading-exits/_fadeOutLeft.scss +31 -0
- data/stylesheets/sammy/animations/fading-exits/_fadeOutLeftBig.scss +31 -0
- data/stylesheets/sammy/animations/fading-exits/_fadeOutRight.scss +31 -0
- data/stylesheets/sammy/animations/fading-exits/_fadeOutRightBig.scss +31 -0
- data/stylesheets/sammy/animations/fading-exits/_fadeOutUp.scss +31 -0
- data/stylesheets/sammy/animations/fading-exits/_fadeOutUpBig.scss +31 -0
- data/stylesheets/sammy/animations/flippers/_flip.scss +44 -0
- data/stylesheets/sammy/animations/flippers/_flipInX.scss +38 -0
- data/stylesheets/sammy/animations/flippers/_flipInY.scss +38 -0
- data/stylesheets/sammy/animations/flippers/_flipOutX.scss +32 -0
- data/stylesheets/sammy/animations/flippers/_flipOutY.scss +32 -0
- data/stylesheets/sammy/animations/rotating-entrances/_rotateIn.scss +33 -0
- data/stylesheets/sammy/animations/rotating-entrances/_rotateInDownLeft.scss +33 -0
- data/stylesheets/sammy/animations/rotating-entrances/_rotateInDownRight.scss +33 -0
- data/stylesheets/sammy/animations/rotating-entrances/_rotateInUpLeft.scss +33 -0
- data/stylesheets/sammy/animations/rotating-entrances/_rotateInUpRight.scss +33 -0
- data/stylesheets/sammy/animations/rotating-exits/_rotateOut.scss +33 -0
- data/stylesheets/sammy/animations/rotating-exits/_rotateOutDownLeft.scss +33 -0
- data/stylesheets/sammy/animations/rotating-exits/_rotateOutDownRight.scss +33 -0
- data/stylesheets/sammy/animations/rotating-exits/_rotateOutUpLeft.scss +33 -0
- data/stylesheets/sammy/animations/rotating-exits/_rotateOutUpRight.scss +33 -0
- data/stylesheets/sammy/animations/specials/_hinge.scss +48 -0
- data/stylesheets/sammy/animations/specials/_rollIn.scss +33 -0
- data/stylesheets/sammy/animations/specials/_rollOut.scss +33 -0
- data/stylesheets/sammy/css3/_animation.scss +75 -0
- data/stylesheets/sammy/css3/_backface-visibility.scss +14 -0
- data/stylesheets/sammy/css3/_transform.scss +27 -0
- data/stylesheets/sammy/css3/animation/_animation-delay.scss +18 -0
- data/stylesheets/sammy/css3/animation/_animation-direction.scss +18 -0
- data/stylesheets/sammy/css3/animation/_animation-duration.scss +17 -0
- data/stylesheets/sammy/css3/animation/_animation-fill-mode.scss +18 -0
- data/stylesheets/sammy/css3/animation/_animation-iteration-count.scss +18 -0
- data/stylesheets/sammy/css3/animation/_animation-name.scss +18 -0
- data/stylesheets/sammy/css3/animation/_animation-play-state.scss +18 -0
- data/stylesheets/sammy/css3/animation/_animation-timing-function.scss +18 -0
- data/stylesheets/sammy/utilities/_mixins.scss +12 -0
- data/templates/sammy/manifest.rb +2 -0
- data/templates/sammy/screen.scss +2 -0
- metadata +140 -0
@@ -0,0 +1,38 @@
|
|
1
|
+
@mixin flipInX($prefix) {
|
2
|
+
0% {
|
3
|
+
@include transform(perspective(400px) rotateX(90deg), $prefix);
|
4
|
+
opacity: 0;
|
5
|
+
}
|
6
|
+
40% {
|
7
|
+
@include transform(perspective(400px) rotateX(-10deg), $prefix);
|
8
|
+
}
|
9
|
+
70% {
|
10
|
+
@include transform(perspective(400px) rotateX(10deg), $prefix);
|
11
|
+
}
|
12
|
+
100% {
|
13
|
+
@include transform(perspective(400px) rotateX(0deg), $prefix);
|
14
|
+
opacity: 1;
|
15
|
+
}
|
16
|
+
}
|
17
|
+
|
18
|
+
@if $experimental-support-for-webkit {
|
19
|
+
@-webkit-keyframes flipInX { @include flipInX(webkit); }
|
20
|
+
}
|
21
|
+
@if $experimental-support-for-khtml {
|
22
|
+
@-khtml-keyframes flipInX { @include flipInX(khtml); }
|
23
|
+
}
|
24
|
+
@if $experimental-support-for-mozilla {
|
25
|
+
@-moz-keyframes flipInX { @include flipInX(moz); }
|
26
|
+
}
|
27
|
+
@if $experimental-support-for-microsoft {
|
28
|
+
@-ms-keyframes flipInX { @include flipInX(ms); }
|
29
|
+
}
|
30
|
+
@if $experimental-support-for-opera {
|
31
|
+
@-o-keyframes flipInX { @include flipInX(o); }
|
32
|
+
}
|
33
|
+
@keyframes flipInX { @include flipInX(none); }
|
34
|
+
|
35
|
+
.flipInX {
|
36
|
+
@include animation-name(flipInX);
|
37
|
+
@include backface-visibility(visible !important);
|
38
|
+
}
|
@@ -0,0 +1,38 @@
|
|
1
|
+
@mixin flipInY($prefix) {
|
2
|
+
0% {
|
3
|
+
@include transform(perspective(400px) rotateY(90deg), $prefix);
|
4
|
+
opacity: 0;
|
5
|
+
}
|
6
|
+
40% {
|
7
|
+
@include transform(perspective(400px) rotateY(-10deg), $prefix);
|
8
|
+
}
|
9
|
+
70% {
|
10
|
+
@include transform(perspective(400px) rotateY(10deg), $prefix);
|
11
|
+
}
|
12
|
+
100% {
|
13
|
+
@include transform(perspective(400px) rotateY(0deg), $prefix);
|
14
|
+
opacity: 1;
|
15
|
+
}
|
16
|
+
}
|
17
|
+
|
18
|
+
@if $experimental-support-for-webkit {
|
19
|
+
@-webkit-keyframes flipInY { @include flipInY(webkit); }
|
20
|
+
}
|
21
|
+
@if $experimental-support-for-khtml {
|
22
|
+
@-khtml-keyframes flipInY { @include flipInY(khtml); }
|
23
|
+
}
|
24
|
+
@if $experimental-support-for-mozilla {
|
25
|
+
@-moz-keyframes flipInY { @include flipInY(moz); }
|
26
|
+
}
|
27
|
+
@if $experimental-support-for-microsoft {
|
28
|
+
@-ms-keyframes flipInY { @include flipInY(ms); }
|
29
|
+
}
|
30
|
+
@if $experimental-support-for-opera {
|
31
|
+
@-o-keyframes flipInY { @include flipInY(o); }
|
32
|
+
}
|
33
|
+
@keyframes flipInY { @include flipInY(none); }
|
34
|
+
|
35
|
+
.flipInY {
|
36
|
+
@include animation-name(flipInY);
|
37
|
+
@include backface-visibility(visible !important);
|
38
|
+
}
|
@@ -0,0 +1,32 @@
|
|
1
|
+
@mixin flipOutX($prefix) {
|
2
|
+
0% {
|
3
|
+
@include transform(perspective(400px) rotateX(0deg), $prefix);
|
4
|
+
opacity: 1;
|
5
|
+
}
|
6
|
+
100% {
|
7
|
+
@include transform(perspective(400px) rotateX(90deg), $prefix);
|
8
|
+
opacity: 0;
|
9
|
+
}
|
10
|
+
}
|
11
|
+
|
12
|
+
@if $experimental-support-for-webkit {
|
13
|
+
@-webkit-keyframes flipOutX { @include flipOutX(webkit); }
|
14
|
+
}
|
15
|
+
@if $experimental-support-for-khtml {
|
16
|
+
@-khtml-keyframes flipOutX { @include flipOutX(khtml); }
|
17
|
+
}
|
18
|
+
@if $experimental-support-for-mozilla {
|
19
|
+
@-moz-keyframes flipOutX { @include flipOutX(moz); }
|
20
|
+
}
|
21
|
+
@if $experimental-support-for-microsoft {
|
22
|
+
@-ms-keyframes flipOutX { @include flipOutX(ms); }
|
23
|
+
}
|
24
|
+
@if $experimental-support-for-opera {
|
25
|
+
@-o-keyframes flipOutX { @include flipOutX(o); }
|
26
|
+
}
|
27
|
+
@keyframes flipOutX { @include flipOutX(none); }
|
28
|
+
|
29
|
+
.flipOutX {
|
30
|
+
@include animation-name(flipOutX);
|
31
|
+
@include backface-visibility(visible !important);
|
32
|
+
}
|
@@ -0,0 +1,32 @@
|
|
1
|
+
@mixin flipOutY($prefix) {
|
2
|
+
0% {
|
3
|
+
@include transform(perspective(400px) rotateY(0deg), $prefix);
|
4
|
+
opacity: 1;
|
5
|
+
}
|
6
|
+
100% {
|
7
|
+
@include transform(perspective(400px) rotateY(90deg), $prefix);
|
8
|
+
opacity: 0;
|
9
|
+
}
|
10
|
+
}
|
11
|
+
|
12
|
+
@if $experimental-support-for-webkit {
|
13
|
+
@-webkit-keyframes flipOutY { @include flipOutY(webkit); }
|
14
|
+
}
|
15
|
+
@if $experimental-support-for-khtml {
|
16
|
+
@-khtml-keyframes flipOutY { @include flipOutY(khtml); }
|
17
|
+
}
|
18
|
+
@if $experimental-support-for-mozilla {
|
19
|
+
@-moz-keyframes flipOutY { @include flipOutY(moz); }
|
20
|
+
}
|
21
|
+
@if $experimental-support-for-microsoft {
|
22
|
+
@-ms-keyframes flipOutY { @include flipOutY(ms); }
|
23
|
+
}
|
24
|
+
@if $experimental-support-for-opera {
|
25
|
+
@-o-keyframes flipOutY { @include flipOutY(o); }
|
26
|
+
}
|
27
|
+
@keyframes flipOutY { @include flipOutY(none); }
|
28
|
+
|
29
|
+
.flipOutY {
|
30
|
+
@include animation-name(flipOutY);
|
31
|
+
@include backface-visibility(visible !important);
|
32
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
@mixin rotateIn($prefix) {
|
2
|
+
0% {
|
3
|
+
@include transform-origin(center center, $prefix);
|
4
|
+
@include transform(rotate(-200deg), $prefix);
|
5
|
+
opacity: 0;
|
6
|
+
}
|
7
|
+
100% {
|
8
|
+
@include transform-origin(center center, $prefix);
|
9
|
+
@include transform(rotate(0), $prefix);
|
10
|
+
opacity: 1;
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
@if $experimental-support-for-webkit {
|
15
|
+
@-webkit-keyframes rotateIn { @include rotateIn(webkit); }
|
16
|
+
}
|
17
|
+
@if $experimental-support-for-khtml {
|
18
|
+
@-khtml-keyframes rotateIn { @include rotateIn(khtml); }
|
19
|
+
}
|
20
|
+
@if $experimental-support-for-mozilla {
|
21
|
+
@-moz-keyframes rotateIn { @include rotateIn(moz); }
|
22
|
+
}
|
23
|
+
@if $experimental-support-for-microsoft {
|
24
|
+
@-ms-keyframes rotateIn { @include rotateIn(ms); }
|
25
|
+
}
|
26
|
+
@if $experimental-support-for-opera {
|
27
|
+
@-o-keyframes rotateIn { @include rotateIn(o); }
|
28
|
+
}
|
29
|
+
@keyframes rotateIn { @include rotateIn(none); }
|
30
|
+
|
31
|
+
.rotateIn {
|
32
|
+
@include animation-name(rotateIn);
|
33
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
@mixin rotateInDownLeft($prefix) {
|
2
|
+
0% {
|
3
|
+
@include transform-origin(left bottom, $prefix);
|
4
|
+
@include transform(rotate(-90deg), $prefix);
|
5
|
+
opacity: 0;
|
6
|
+
}
|
7
|
+
100% {
|
8
|
+
@include transform-origin(left bottom, $prefix);
|
9
|
+
@include transform(rotate(0), $prefix);
|
10
|
+
opacity: 1;
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
@if $experimental-support-for-webkit {
|
15
|
+
@-webkit-keyframes rotateInDownLeft { @include rotateInDownLeft(webkit); }
|
16
|
+
}
|
17
|
+
@if $experimental-support-for-khtml {
|
18
|
+
@-khtml-keyframes rotateInDownLeft { @include rotateInDownLeft(khtml); }
|
19
|
+
}
|
20
|
+
@if $experimental-support-for-mozilla {
|
21
|
+
@-moz-keyframes rotateInDownLeft { @include rotateInDownLeft(moz); }
|
22
|
+
}
|
23
|
+
@if $experimental-support-for-microsoft {
|
24
|
+
@-ms-keyframes rotateInDownLeft { @include rotateInDownLeft(ms); }
|
25
|
+
}
|
26
|
+
@if $experimental-support-for-opera {
|
27
|
+
@-o-keyframes rotateInDownLeft { @include rotateInDownLeft(o); }
|
28
|
+
}
|
29
|
+
@keyframes rotateInDownLeft { @include rotateInDownLeft(none); }
|
30
|
+
|
31
|
+
.rotateInDownLeft {
|
32
|
+
@include animation-name(rotateInDownLeft);
|
33
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
@mixin rotateInDownRight($prefix) {
|
2
|
+
0% {
|
3
|
+
@include transform-origin(right bottom, $prefix);
|
4
|
+
@include transform(rotate(90deg), $prefix);
|
5
|
+
opacity: 0;
|
6
|
+
}
|
7
|
+
100% {
|
8
|
+
@include transform-origin(right bottom, $prefix);
|
9
|
+
@include transform(rotate(0), $prefix);
|
10
|
+
opacity: 1;
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
@if $experimental-support-for-webkit {
|
15
|
+
@-webkit-keyframes rotateInDownRight { @include rotateInDownRight(webkit); }
|
16
|
+
}
|
17
|
+
@if $experimental-support-for-khtml {
|
18
|
+
@-khtml-keyframes rotateInDownRight { @include rotateInDownRight(khtml); }
|
19
|
+
}
|
20
|
+
@if $experimental-support-for-mozilla {
|
21
|
+
@-moz-keyframes rotateInDownRight { @include rotateInDownRight(moz); }
|
22
|
+
}
|
23
|
+
@if $experimental-support-for-microsoft {
|
24
|
+
@-ms-keyframes rotateInDownRight { @include rotateInDownRight(ms); }
|
25
|
+
}
|
26
|
+
@if $experimental-support-for-opera {
|
27
|
+
@-o-keyframes rotateInDownRight { @include rotateInDownRight(o); }
|
28
|
+
}
|
29
|
+
@keyframes rotateInDownRight { @include rotateInDownRight(none); }
|
30
|
+
|
31
|
+
.rotateInDownRight {
|
32
|
+
@include animation-name(rotateInDownRight);
|
33
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
@mixin rotateInUpLeft($prefix) {
|
2
|
+
0% {
|
3
|
+
@include transform-origin(left bottom, $prefix);
|
4
|
+
@include transform(rotate(90deg), $prefix);
|
5
|
+
opacity: 0;
|
6
|
+
}
|
7
|
+
100% {
|
8
|
+
@include transform-origin(left bottom, $prefix);
|
9
|
+
@include transform(rotate(0), $prefix);
|
10
|
+
opacity: 1;
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
@if $experimental-support-for-webkit {
|
15
|
+
@-webkit-keyframes rotateInUpLeft { @include rotateInUpLeft(webkit); }
|
16
|
+
}
|
17
|
+
@if $experimental-support-for-khtml {
|
18
|
+
@-khtml-keyframes rotateInUpLeft { @include rotateInUpLeft(khtml); }
|
19
|
+
}
|
20
|
+
@if $experimental-support-for-mozilla {
|
21
|
+
@-moz-keyframes rotateInUpLeft { @include rotateInUpLeft(moz); }
|
22
|
+
}
|
23
|
+
@if $experimental-support-for-microsoft {
|
24
|
+
@-ms-keyframes rotateInUpLeft { @include rotateInUpLeft(ms); }
|
25
|
+
}
|
26
|
+
@if $experimental-support-for-opera {
|
27
|
+
@-o-keyframes rotateInUpLeft { @include rotateInUpLeft(o); }
|
28
|
+
}
|
29
|
+
@keyframes rotateInUpLeft { @include rotateInUpLeft(none); }
|
30
|
+
|
31
|
+
.rotateInUpLeft {
|
32
|
+
@include animation-name(rotateInUpLeft);
|
33
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
@mixin rotateInUpRight($prefix) {
|
2
|
+
0% {
|
3
|
+
@include transform-origin(right bottom, $prefix);
|
4
|
+
@include transform(rotate(-90deg), $prefix);
|
5
|
+
opacity: 0;
|
6
|
+
}
|
7
|
+
100% {
|
8
|
+
@include transform-origin(right bottom, $prefix);
|
9
|
+
@include transform(rotate(0), $prefix);
|
10
|
+
opacity: 1;
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
@if $experimental-support-for-webkit {
|
15
|
+
@-webkit-keyframes rotateInUpRight { @include rotateInUpRight(webkit); }
|
16
|
+
}
|
17
|
+
@if $experimental-support-for-khtml {
|
18
|
+
@-khtml-keyframes rotateInUpRight { @include rotateInUpRight(khtml); }
|
19
|
+
}
|
20
|
+
@if $experimental-support-for-mozilla {
|
21
|
+
@-moz-keyframes rotateInUpRight { @include rotateInUpRight(moz); }
|
22
|
+
}
|
23
|
+
@if $experimental-support-for-microsoft {
|
24
|
+
@-ms-keyframes rotateInUpRight { @include rotateInUpRight(ms); }
|
25
|
+
}
|
26
|
+
@if $experimental-support-for-opera {
|
27
|
+
@-o-keyframes rotateInUpRight { @include rotateInUpRight(o); }
|
28
|
+
}
|
29
|
+
@keyframes rotateInUpRight { @include rotateInUpRight(none); }
|
30
|
+
|
31
|
+
.rotateInUpRight {
|
32
|
+
@include animation-name(rotateInUpRight);
|
33
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
@mixin rotateOut($prefix) {
|
2
|
+
0% {
|
3
|
+
@include transform-origin(center center, $prefix);
|
4
|
+
@include transform(rotate(0), $prefix);
|
5
|
+
opacity: 1;
|
6
|
+
}
|
7
|
+
100% {
|
8
|
+
@include transform-origin(center center, $prefix);
|
9
|
+
@include transform(rotate(200deg), $prefix);
|
10
|
+
opacity: 0;
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
@if $experimental-support-for-webkit {
|
15
|
+
@-webkit-keyframes rotateOut { @include rotateOut(webkit); }
|
16
|
+
}
|
17
|
+
@if $experimental-support-for-khtml {
|
18
|
+
@-khtml-keyframes rotateOut { @include rotateOut(khtml); }
|
19
|
+
}
|
20
|
+
@if $experimental-support-for-mozilla {
|
21
|
+
@-moz-keyframes rotateOut { @include rotateOut(moz); }
|
22
|
+
}
|
23
|
+
@if $experimental-support-for-microsoft {
|
24
|
+
@-ms-keyframes rotateOut { @include rotateOut(ms); }
|
25
|
+
}
|
26
|
+
@if $experimental-support-for-opera {
|
27
|
+
@-o-keyframes rotateOut { @include rotateOut(o); }
|
28
|
+
}
|
29
|
+
@keyframes rotateOut { @include rotateOut(none); }
|
30
|
+
|
31
|
+
.rotateOut {
|
32
|
+
@include animation-name(rotateOut);
|
33
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
@mixin rotateOutDownLeft($prefix) {
|
2
|
+
0% {
|
3
|
+
@include transform-origin(left bottom, $prefix);
|
4
|
+
@include transform(rotate(0), $prefix);
|
5
|
+
opacity: 1;
|
6
|
+
}
|
7
|
+
100% {
|
8
|
+
@include transform-origin(left bottom, $prefix);
|
9
|
+
@include transform(rotate(90deg), $prefix);
|
10
|
+
opacity: 0;
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
@if $experimental-support-for-webkit {
|
15
|
+
@-webkit-keyframes rotateOutDownLeft { @include rotateOutDownLeft(webkit); }
|
16
|
+
}
|
17
|
+
@if $experimental-support-for-khtml {
|
18
|
+
@-khtml-keyframes rotateOutDownLeft { @include rotateOutDownLeft(khtml); }
|
19
|
+
}
|
20
|
+
@if $experimental-support-for-mozilla {
|
21
|
+
@-moz-keyframes rotateOutDownLeft { @include rotateOutDownLeft(moz); }
|
22
|
+
}
|
23
|
+
@if $experimental-support-for-microsoft {
|
24
|
+
@-ms-keyframes rotateOutDownLeft { @include rotateOutDownLeft(ms); }
|
25
|
+
}
|
26
|
+
@if $experimental-support-for-opera {
|
27
|
+
@-o-keyframes rotateOutDownLeft { @include rotateOutDownLeft(o); }
|
28
|
+
}
|
29
|
+
@keyframes rotateOutDownLeft { @include rotateOutDownLeft(none); }
|
30
|
+
|
31
|
+
.rotateOutDownLeft {
|
32
|
+
@include animation-name(rotateOutDownLeft);
|
33
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
@mixin rotateOutDownRight($prefix) {
|
2
|
+
0% {
|
3
|
+
@include transform-origin(right bottom, $prefix);
|
4
|
+
@include transform(rotate(0), $prefix);
|
5
|
+
opacity: 1;
|
6
|
+
}
|
7
|
+
100% {
|
8
|
+
@include transform-origin(right bottom, $prefix);
|
9
|
+
@include transform(rotate(-90deg), $prefix);
|
10
|
+
opacity: 0;
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
@if $experimental-support-for-webkit {
|
15
|
+
@-webkit-keyframes rotateOutDownRight { @include rotateOutDownRight(webkit); }
|
16
|
+
}
|
17
|
+
@if $experimental-support-for-khtml {
|
18
|
+
@-khtml-keyframes rotateOutDownRight { @include rotateOutDownRight(khtml); }
|
19
|
+
}
|
20
|
+
@if $experimental-support-for-mozilla {
|
21
|
+
@-moz-keyframes rotateOutDownRight { @include rotateOutDownRight(moz); }
|
22
|
+
}
|
23
|
+
@if $experimental-support-for-microsoft {
|
24
|
+
@-ms-keyframes rotateOutDownRight { @include rotateOutDownRight(ms); }
|
25
|
+
}
|
26
|
+
@if $experimental-support-for-opera {
|
27
|
+
@-o-keyframes rotateOutDownRight { @include rotateOutDownRight(o); }
|
28
|
+
}
|
29
|
+
@keyframes rotateOutDownRight { @include rotateOutDownRight(none); }
|
30
|
+
|
31
|
+
.rotateOutDownRight {
|
32
|
+
@include animation-name(rotateOutDownRight);
|
33
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
@mixin rotateOutUpLeft($prefix) {
|
2
|
+
0% {
|
3
|
+
@include transform-origin(left bottom, $prefix);
|
4
|
+
@include transform(rotate(0), $prefix);
|
5
|
+
opacity: 1;
|
6
|
+
}
|
7
|
+
100% {
|
8
|
+
@include transform-origin(left bottom, $prefix);
|
9
|
+
@include transform(rotate(-90deg), $prefix);
|
10
|
+
opacity: 0;
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
@if $experimental-support-for-webkit {
|
15
|
+
@-webkit-keyframes rotateOutUpLeft { @include rotateOutUpLeft(webkit); }
|
16
|
+
}
|
17
|
+
@if $experimental-support-for-khtml {
|
18
|
+
@-khtml-keyframes rotateOutUpLeft { @include rotateOutUpLeft(khtml); }
|
19
|
+
}
|
20
|
+
@if $experimental-support-for-mozilla {
|
21
|
+
@-moz-keyframes rotateOutUpLeft { @include rotateOutUpLeft(moz); }
|
22
|
+
}
|
23
|
+
@if $experimental-support-for-microsoft {
|
24
|
+
@-ms-keyframes rotateOutUpLeft { @include rotateOutUpLeft(ms); }
|
25
|
+
}
|
26
|
+
@if $experimental-support-for-opera {
|
27
|
+
@-o-keyframes rotateOutUpLeft { @include rotateOutUpLeft(o); }
|
28
|
+
}
|
29
|
+
@keyframes rotateOutUpLeft { @include rotateOutUpLeft(none); }
|
30
|
+
|
31
|
+
.rotateOutUpLeft {
|
32
|
+
@include animation-name(rotateOutUpLeft);
|
33
|
+
}
|