compass-animate 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/README.md +33 -0
- data/lib/animate.rb +3 -0
- data/stylesheets/_animate.scss +234 -0
- data/stylesheets/animate/bounce.scss +37 -0
- data/stylesheets/animate/bounceIn.scss +43 -0
- data/stylesheets/animate/bounceInDown.scss +43 -0
- data/stylesheets/animate/bounceInLeft.scss +43 -0
- data/stylesheets/animate/bounceInRight.scss +43 -0
- data/stylesheets/animate/bounceInUp.scss +43 -0
- data/stylesheets/animate/bounceOut.scss +43 -0
- data/stylesheets/animate/bounceOutDown.scss +38 -0
- data/stylesheets/animate/bounceOutLeft.scss +38 -0
- data/stylesheets/animate/bounceOutRight.scss +38 -0
- data/stylesheets/animate/bounceOutUp.scss +38 -0
- data/stylesheets/animate/fadeIn.scss +33 -0
- data/stylesheets/animate/fadeInDown.scss +33 -0
- data/stylesheets/animate/fadeInDownBig.scss +33 -0
- data/stylesheets/animate/fadeInLeft.scss +33 -0
- data/stylesheets/animate/fadeInLeftBig.scss +33 -0
- data/stylesheets/animate/fadeInRight.scss +33 -0
- data/stylesheets/animate/fadeInRightBig.scss +33 -0
- data/stylesheets/animate/fadeInUp.scss +33 -0
- data/stylesheets/animate/fadeInUpBig.scss +33 -0
- data/stylesheets/animate/fadeOut.scss +33 -0
- data/stylesheets/animate/fadeOutDown.scss +33 -0
- data/stylesheets/animate/fadeOutDownBig.scss +33 -0
- data/stylesheets/animate/fadeOutLeft.scss +33 -0
- data/stylesheets/animate/fadeOutLeftBig.scss +33 -0
- data/stylesheets/animate/fadeOutRight.scss +33 -0
- data/stylesheets/animate/fadeOutRightBig.scss +33 -0
- data/stylesheets/animate/fadeOutUp.scss +33 -0
- data/stylesheets/animate/fadeOutUpBig.scss +28 -0
- data/stylesheets/animate/flash.scss +33 -0
- data/stylesheets/animate/flip.scss +41 -0
- data/stylesheets/animate/flipInX.scss +33 -0
- data/stylesheets/animate/flipInY.scss +39 -0
- data/stylesheets/animate/flipOutX.scss +33 -0
- data/stylesheets/animate/flipOutY.scss +29 -0
- data/stylesheets/animate/hinge.scss +48 -0
- data/stylesheets/animate/lightSpeedIn.scss +44 -0
- data/stylesheets/animate/lightSpeedOut.scss +34 -0
- data/stylesheets/animate/properties.scss +78 -0
- data/stylesheets/animate/pulse.scss +40 -0
- data/stylesheets/animate/rollIn.scss +35 -0
- data/stylesheets/animate/rollOut.scss +35 -0
- data/stylesheets/animate/rotateIn.scss +33 -0
- data/stylesheets/animate/rotateInDownLeft.scss +33 -0
- data/stylesheets/animate/rotateInDownRight.scss +32 -0
- data/stylesheets/animate/rotateInUpLeft.scss +33 -0
- data/stylesheets/animate/rotateInUpRight.scss +33 -0
- data/stylesheets/animate/rotateOut.scss +33 -0
- data/stylesheets/animate/rotateOutDownLeft.scss +33 -0
- data/stylesheets/animate/rotateOutDownRight.scss +33 -0
- data/stylesheets/animate/rotateOutUpLeft.scss +33 -0
- data/stylesheets/animate/rotateOutUpRight.scss +33 -0
- data/stylesheets/animate/shake.scss +38 -0
- data/stylesheets/animate/swing.scss +50 -0
- data/stylesheets/animate/tada.scss +48 -0
- data/stylesheets/animate/wiggle.scss +78 -0
- data/stylesheets/animate/wobble.scss +60 -0
- metadata +120 -0
@@ -0,0 +1,35 @@
|
|
1
|
+
// originally authored by Nick Pettit - https://github.com/nickpettit/glide
|
2
|
+
|
3
|
+
@-webkit-keyframes rollOut {
|
4
|
+
0% {opacity: 1; -webkit-transform: translateX(0px) rotate(0deg);}
|
5
|
+
100% {opacity: 0; -webkit-transform: translateX(100%) rotate(120deg);}
|
6
|
+
}
|
7
|
+
|
8
|
+
@-moz-keyframes rollOut {
|
9
|
+
0% {opacity: 1; -moz-transform: translateX(0px) rotate(0deg);}
|
10
|
+
100% {opacity: 0; -moz-transform: translateX(100%) rotate(120deg);}
|
11
|
+
}
|
12
|
+
|
13
|
+
@-ms-keyframes rollOut {
|
14
|
+
0% {opacity: 1; -ms-transform: translateX(0px) rotate(0deg);}
|
15
|
+
100% {opacity: 0; -ms-transform: translateX(100%) rotate(120deg);}
|
16
|
+
}
|
17
|
+
|
18
|
+
@-o-keyframes rollOut {
|
19
|
+
0% {opacity: 1; -o-transform: translateX(0px) rotate(0deg);}
|
20
|
+
100% {opacity: 0; -o-transform: translateX(100%) rotate(120deg);}
|
21
|
+
}
|
22
|
+
|
23
|
+
@keyframes rollOut {
|
24
|
+
0% {opacity: 1; transform: translateX(0px) rotate(0deg);}
|
25
|
+
100% {opacity: 0; transform: translateX(100%) rotate(120deg);}
|
26
|
+
}
|
27
|
+
|
28
|
+
@mixin rollOut($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
|
29
|
+
@include animation-name(rollOut);
|
30
|
+
@include duration($duration);
|
31
|
+
@include delay($delay);
|
32
|
+
@include function($function);
|
33
|
+
@include fill-mode($fill);
|
34
|
+
@include visibility($visibility);
|
35
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
@-webkit-keyframes rotateIn {
|
2
|
+
0% {-webkit-transform-origin: center center; -webkit-transform: rotate(-200deg); opacity: 0;}
|
3
|
+
100% {-webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1;}
|
4
|
+
}
|
5
|
+
|
6
|
+
@-moz-keyframes rotateIn {
|
7
|
+
0% {-moz-transform-origin: center center; -moz-transform: rotate(-200deg); opacity: 0;}
|
8
|
+
100% {-moz-transform-origin: center center; -moz-transform: rotate(0); opacity: 1;}
|
9
|
+
}
|
10
|
+
|
11
|
+
@-ms-keyframes rotateIn {
|
12
|
+
0% {-ms-transform-origin: center center; -ms-transform: rotate(-200deg); opacity: 0;}
|
13
|
+
100% {-ms-transform-origin: center center; -ms-transform: rotate(0); opacity: 1;}
|
14
|
+
}
|
15
|
+
|
16
|
+
@-o-keyframes rotateIn {
|
17
|
+
0% {-o-transform-origin: center center; -o-transform: rotate(-200deg); opacity: 0;}
|
18
|
+
100% {-o-transform-origin: center center; -o-transform: rotate(0); opacity: 1;}
|
19
|
+
}
|
20
|
+
|
21
|
+
@keyframes rotateIn {
|
22
|
+
0% {transform-origin: center center; transform: rotate(-200deg); opacity: 0;}
|
23
|
+
100% {transform-origin: center center; transform: rotate(0); opacity: 1;}
|
24
|
+
}
|
25
|
+
|
26
|
+
@mixin rotateIn($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
|
27
|
+
@include animation-name(rotateIn);
|
28
|
+
@include duration($duration);
|
29
|
+
@include delay($delay);
|
30
|
+
@include function($function);
|
31
|
+
@include fill-mode($fill);
|
32
|
+
@include visibility($visibility);
|
33
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
@-webkit-keyframes rotateInDownLeft {
|
2
|
+
0% {-webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0;}
|
3
|
+
100% {-webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1;}
|
4
|
+
}
|
5
|
+
|
6
|
+
@-moz-keyframes rotateInDownLeft {
|
7
|
+
0% {-moz-transform-origin: left bottom; -moz-transform: rotate(-90deg); opacity: 0;}
|
8
|
+
100% {-moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1;}
|
9
|
+
}
|
10
|
+
|
11
|
+
@-ms-keyframes rotateInDownLeft {
|
12
|
+
0% {-ms-transform-origin: left bottom; -ms-transform: rotate(-90deg); opacity: 0;}
|
13
|
+
100% {-ms-transform-origin: left bottom; -ms-transform: rotate(0); opacity: 1;}
|
14
|
+
}
|
15
|
+
|
16
|
+
@-o-keyframes rotateInDownLeft {
|
17
|
+
0% {-o-transform-origin: left bottom; -o-transform: rotate(-90deg); opacity: 0;}
|
18
|
+
100% {-o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1;}
|
19
|
+
}
|
20
|
+
|
21
|
+
@keyframes rotateInDownLeft {
|
22
|
+
0% {transform-origin: left bottom; transform: rotate(-90deg); opacity: 0;}
|
23
|
+
100% {transform-origin: left bottom; transform: rotate(0); opacity: 1;}
|
24
|
+
}
|
25
|
+
|
26
|
+
@mixin rotateInDownLeft($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
|
27
|
+
@include animation-name(rotateInDownLeft);
|
28
|
+
@include duration($duration);
|
29
|
+
@include delay($delay);
|
30
|
+
@include function($function);
|
31
|
+
@include fill-mode($fill);
|
32
|
+
@include visibility($visibility);
|
33
|
+
}
|
@@ -0,0 +1,32 @@
|
|
1
|
+
@-webkit-keyframes rotateInDownRight {
|
2
|
+
0% {-webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0;}
|
3
|
+
100% {-webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1;}
|
4
|
+
}
|
5
|
+
|
6
|
+
@-moz-keyframes rotateInDownRight {
|
7
|
+
0% {-moz-transform-origin: right bottom; -moz-transform: rotate(90deg); opacity: 0;}
|
8
|
+
100% {-moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1;}
|
9
|
+
}
|
10
|
+
|
11
|
+
@-ms-keyframes rotateInDownRight {
|
12
|
+
0% {-ms-transform-origin: right bottom; -ms-transform: rotate(90deg); opacity: 0;}
|
13
|
+
100% {-ms-transform-origin: right bottom; -ms-transform: rotate(0); opacity: 1;}
|
14
|
+
}
|
15
|
+
|
16
|
+
@-o-keyframes rotateInDownRight {
|
17
|
+
0% {-o-transform-origin: right bottom; -o-transform: rotate(90deg); opacity: 0;}
|
18
|
+
100% {-o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1;} }
|
19
|
+
|
20
|
+
@keyframes rotateInDownRight {
|
21
|
+
0% {transform-origin: right bottom; transform: rotate(90deg); opacity: 0;}
|
22
|
+
100% {transform-origin: right bottom; transform: rotate(0); opacity: 1;}
|
23
|
+
}
|
24
|
+
|
25
|
+
@mixin rotateInDownRight($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
|
26
|
+
@include animation-name(rotateInDownRight);
|
27
|
+
@include duration($duration);
|
28
|
+
@include delay($delay);
|
29
|
+
@include function($function);
|
30
|
+
@include fill-mode($fill);
|
31
|
+
@include visibility($visibility);
|
32
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
@-webkit-keyframes rotateInUpLeft {
|
2
|
+
0% {-webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0;}
|
3
|
+
100% {-webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1;}
|
4
|
+
}
|
5
|
+
|
6
|
+
@-moz-keyframes rotateInUpLeft {
|
7
|
+
0% {-moz-transform-origin: left bottom; -moz-transform: rotate(90deg); opacity: 0;}
|
8
|
+
100% {-moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1;}
|
9
|
+
}
|
10
|
+
|
11
|
+
@-ms-keyframes rotateInUpLeft {
|
12
|
+
0% {-ms-transform-origin: left bottom; -ms-transform: rotate(90deg); opacity: 0;}
|
13
|
+
100% {-ms-transform-origin: left bottom; -ms-transform: rotate(0); opacity: 1;}
|
14
|
+
}
|
15
|
+
|
16
|
+
@-o-keyframes rotateInUpLeft {
|
17
|
+
0% {-o-transform-origin: left bottom; -o-transform: rotate(90deg); opacity: 0;}
|
18
|
+
100% {-o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1;}
|
19
|
+
}
|
20
|
+
|
21
|
+
@keyframes rotateInUpLeft {
|
22
|
+
0% {transform-origin: left bottom; transform: rotate(90deg); opacity: 0;}
|
23
|
+
100% {transform-origin: left bottom; transform: rotate(0); opacity: 1;}
|
24
|
+
}
|
25
|
+
|
26
|
+
@mixin rotateInUpLeft($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
|
27
|
+
@include animation-name(rotateInUpLeft);
|
28
|
+
@include duration($duration);
|
29
|
+
@include delay($delay);
|
30
|
+
@include function($function);
|
31
|
+
@include fill-mode($fill);
|
32
|
+
@include visibility($visibility);
|
33
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
@-webkit-keyframes rotateInUpRight {
|
2
|
+
0% {-webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0;}
|
3
|
+
100% {-webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1;}
|
4
|
+
}
|
5
|
+
|
6
|
+
@-moz-keyframes rotateInUpRight {
|
7
|
+
0% {-moz-transform-origin: right bottom; -moz-transform: rotate(-90deg); opacity: 0;}
|
8
|
+
100% {-moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1;}
|
9
|
+
}
|
10
|
+
|
11
|
+
@-ms-keyframes rotateInUpRight {
|
12
|
+
0% {-ms-transform-origin: right bottom; -ms-transform: rotate(-90deg); opacity: 0;}
|
13
|
+
100% {-ms-transform-origin: right bottom; -ms-transform: rotate(0); opacity: 1;}
|
14
|
+
}
|
15
|
+
|
16
|
+
@-o-keyframes rotateInUpRight {
|
17
|
+
0% {-o-transform-origin: right bottom; -o-transform: rotate(-90deg); opacity: 0;}
|
18
|
+
100% {-o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1;}
|
19
|
+
}
|
20
|
+
|
21
|
+
@keyframes rotateInUpRight {
|
22
|
+
0% {transform-origin: right bottom; transform: rotate(-90deg); opacity: 0;}
|
23
|
+
100% {transform-origin: right bottom; transform: rotate(0); opacity: 1;}
|
24
|
+
}
|
25
|
+
|
26
|
+
@mixin rotateInUpRight($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
|
27
|
+
@include animation-name(rotateInUpRight);
|
28
|
+
@include duration($duration);
|
29
|
+
@include delay($delay);
|
30
|
+
@include function($function);
|
31
|
+
@include fill-mode($fill);
|
32
|
+
@include visibility($visibility);
|
33
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
@-webkit-keyframes rotateOut {
|
2
|
+
0% {-webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1;}
|
3
|
+
100% {-webkit-transform-origin: center center; -webkit-transform: rotate(200deg); opacity: 0;}
|
4
|
+
}
|
5
|
+
|
6
|
+
@-moz-keyframes rotateOut {
|
7
|
+
0% {-moz-transform-origin: center center; -moz-transform: rotate(0); opacity: 1;}
|
8
|
+
100% {-moz-transform-origin: center center; -moz-transform: rotate(200deg); opacity: 0;}
|
9
|
+
}
|
10
|
+
|
11
|
+
@-ms-keyframes rotateOut {
|
12
|
+
0% {-ms-transform-origin: center center; -ms-transform: rotate(0); opacity: 1;}
|
13
|
+
100% {-ms-transform-origin: center center; -ms-transform: rotate(200deg); opacity: 0;}
|
14
|
+
}
|
15
|
+
|
16
|
+
@-o-keyframes rotateOut {
|
17
|
+
0% {-o-transform-origin: center center; -o-transform: rotate(0); opacity: 1;}
|
18
|
+
100% {-o-transform-origin: center center; -o-transform: rotate(200deg); opacity: 0;}
|
19
|
+
}
|
20
|
+
|
21
|
+
@keyframes rotateOut {
|
22
|
+
0% {transform-origin: center center; transform: rotate(0); opacity: 1;}
|
23
|
+
100% {transform-origin: center center; transform: rotate(200deg); opacity: 0;}
|
24
|
+
}
|
25
|
+
|
26
|
+
@mixin rotateOut($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
|
27
|
+
@include animation-name(rotateOut);
|
28
|
+
@include duration($duration);
|
29
|
+
@include delay($delay);
|
30
|
+
@include function($function);
|
31
|
+
@include fill-mode($fill);
|
32
|
+
@include visibility($visibility);
|
33
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
@-webkit-keyframes rotateOutDownLeft {
|
2
|
+
0% {-webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1;}
|
3
|
+
100% {-webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0;}
|
4
|
+
}
|
5
|
+
|
6
|
+
@-moz-keyframes rotateOutDownLeft {
|
7
|
+
0% {-moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1;}
|
8
|
+
100% {-moz-transform-origin: left bottom; -moz-transform: rotate(90deg); opacity: 0;}
|
9
|
+
}
|
10
|
+
|
11
|
+
@-ms-keyframes rotateOutDownLeft {
|
12
|
+
0% {-ms-transform-origin: left bottom; -ms-transform: rotate(0); opacity: 1;}
|
13
|
+
100% {-ms-transform-origin: left bottom; -ms-transform: rotate(90deg); opacity: 0;}
|
14
|
+
}
|
15
|
+
|
16
|
+
@-o-keyframes rotateOutDownLeft {
|
17
|
+
0% {-o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1;}
|
18
|
+
100% {-o-transform-origin: left bottom; -o-transform: rotate(90deg); opacity: 0;}
|
19
|
+
}
|
20
|
+
|
21
|
+
@keyframes rotateOutDownLeft {
|
22
|
+
0% {transform-origin: left bottom; transform: rotate(0); opacity: 1;}
|
23
|
+
100% {transform-origin: left bottom; transform: rotate(90deg); opacity: 0;}
|
24
|
+
}
|
25
|
+
|
26
|
+
@mixin rotateOutDownLeft($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
|
27
|
+
@include animation-name(rotateOutDownLeft);
|
28
|
+
@include duration($duration);
|
29
|
+
@include delay($delay);
|
30
|
+
@include function($function);
|
31
|
+
@include fill-mode($fill);
|
32
|
+
@include visibility($visibility);
|
33
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
@-webkit-keyframes rotateOutDownRight {
|
2
|
+
0% {-webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1;}
|
3
|
+
100% {-webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0;}
|
4
|
+
}
|
5
|
+
|
6
|
+
@-moz-keyframes rotateOutDownRight {
|
7
|
+
0% {-moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1;}
|
8
|
+
100% {-moz-transform-origin: right bottom; -moz-transform: rotate(-90deg); opacity: 0;}
|
9
|
+
}
|
10
|
+
|
11
|
+
@-ms-keyframes rotateOutDownRight {
|
12
|
+
0% {-ms-transform-origin: right bottom; -ms-transform: rotate(0); opacity: 1;}
|
13
|
+
100% {-ms-transform-origin: right bottom; -ms-transform: rotate(-90deg); opacity: 0;}
|
14
|
+
}
|
15
|
+
|
16
|
+
@-o-keyframes rotateOutDownRight {
|
17
|
+
0% {-o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1;}
|
18
|
+
100% {-o-transform-origin: right bottom; -o-transform: rotate(-90deg); opacity: 0;}
|
19
|
+
}
|
20
|
+
|
21
|
+
@keyframes rotateOutDownRight {
|
22
|
+
0% {transform-origin: right bottom; transform: rotate(0); opacity: 1;}
|
23
|
+
100% {transform-origin: right bottom; transform: rotate(-90deg); opacity: 0;}
|
24
|
+
}
|
25
|
+
|
26
|
+
@mixin rotateOutDownRight($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
|
27
|
+
@include animation-name(rotateOutDownRight);
|
28
|
+
@include duration($duration);
|
29
|
+
@include delay($delay);
|
30
|
+
@include function($function);
|
31
|
+
@include fill-mode($fill);
|
32
|
+
@include visibility($visibility);
|
33
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
@-webkit-keyframes rotateOutUpLeft {
|
2
|
+
0% {-webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1;}
|
3
|
+
100% {-webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0;}
|
4
|
+
}
|
5
|
+
|
6
|
+
@-moz-keyframes rotateOutUpLeft {
|
7
|
+
0% {-moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1;}
|
8
|
+
100% {-moz-transform-origin: left bottom; -moz-transform: rotate(-90deg); opacity: 0;}
|
9
|
+
}
|
10
|
+
|
11
|
+
@-ms-keyframes rotateOutUpLeft {
|
12
|
+
0% {-ms-transform-origin: left bottom; -ms-transform: rotate(0); opacity: 1;}
|
13
|
+
100% {-ms-transform-origin: left bottom; -ms-transform: rotate(-90deg); opacity: 0;}
|
14
|
+
}
|
15
|
+
|
16
|
+
@-o-keyframes rotateOutUpLeft {
|
17
|
+
0% {-o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1;}
|
18
|
+
100% {-o-transform-origin: left bottom; -o-transform: rotate(-90deg); opacity: 0;}
|
19
|
+
}
|
20
|
+
|
21
|
+
@keyframes rotateOutUpLeft {
|
22
|
+
0% {transform-origin: left bottom; transform: rotate(0); opacity: 1;}
|
23
|
+
100% {transform-origin: left bottom; transform: rotate(-90deg); opacity: 0;}
|
24
|
+
}
|
25
|
+
|
26
|
+
@mixin rotateOutUpLeft($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
|
27
|
+
@include animation-name(rotateOutUpLeft);
|
28
|
+
@include duration($duration);
|
29
|
+
@include delay($delay);
|
30
|
+
@include function($function);
|
31
|
+
@include fill-mode($fill);
|
32
|
+
@include visibility($visibility);
|
33
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
@-webkit-keyframes rotateOutUpRight {
|
2
|
+
0% {-webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1;}
|
3
|
+
100% {-webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0;}
|
4
|
+
}
|
5
|
+
|
6
|
+
@-moz-keyframes rotateOutUpRight {
|
7
|
+
0% {-moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1;}
|
8
|
+
100% {-moz-transform-origin: right bottom; -moz-transform: rotate(90deg); opacity: 0;}
|
9
|
+
}
|
10
|
+
|
11
|
+
@-ms-keyframes rotateOutUpRight {
|
12
|
+
0% {-ms-transform-origin: right bottom; -ms-transform: rotate(0); opacity: 1;}
|
13
|
+
100% {-ms-transform-origin: right bottom; -ms-transform: rotate(90deg); opacity: 0;}
|
14
|
+
}
|
15
|
+
|
16
|
+
@-o-keyframes rotateOutUpRight {
|
17
|
+
0% {-o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1;}
|
18
|
+
100% {-o-transform-origin: right bottom; -o-transform: rotate(90deg); opacity: 0;}
|
19
|
+
}
|
20
|
+
|
21
|
+
@keyframes rotateOutUpRight {
|
22
|
+
0% {transform-origin: right bottom; transform: rotate(0); opacity: 1;}
|
23
|
+
100% {transform-origin: right bottom; transform: rotate(90deg); opacity: 0;}
|
24
|
+
}
|
25
|
+
|
26
|
+
@mixin rotateOutUpRight($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
|
27
|
+
@include animation-name(rotateOutUpRight);
|
28
|
+
@include duration($duration);
|
29
|
+
@include delay($delay);
|
30
|
+
@include function($function);
|
31
|
+
@include fill-mode($fill);
|
32
|
+
@include visibility($visibility);
|
33
|
+
}
|
@@ -0,0 +1,38 @@
|
|
1
|
+
@-webkit-keyframes shake {
|
2
|
+
0%, 100% {-webkit-transform: translateX(0);}
|
3
|
+
10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
|
4
|
+
20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
|
5
|
+
}
|
6
|
+
|
7
|
+
@-moz-keyframes shake {
|
8
|
+
0%, 100% {-moz-transform: translateX(0);}
|
9
|
+
10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
|
10
|
+
20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
|
11
|
+
}
|
12
|
+
|
13
|
+
@-ms-keyframes shake {
|
14
|
+
0%, 100% {-ms-transform: translateX(0);}
|
15
|
+
10%, 30%, 50%, 70%, 90% {-ms-transform: translateX(-10px);}
|
16
|
+
20%, 40%, 60%, 80% {-ms-transform: translateX(10px);}
|
17
|
+
}
|
18
|
+
|
19
|
+
@-o-keyframes shake {
|
20
|
+
0%, 100% {-o-transform: translateX(0);}
|
21
|
+
10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
|
22
|
+
20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
|
23
|
+
}
|
24
|
+
|
25
|
+
@keyframes shake {
|
26
|
+
0%, 100% {transform: translateX(0);}
|
27
|
+
10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
|
28
|
+
20%, 40%, 60%, 80% {transform: translateX(10px);}
|
29
|
+
}
|
30
|
+
|
31
|
+
@mixin shake($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
|
32
|
+
@include animation-name(shake);
|
33
|
+
@include duration($duration);
|
34
|
+
@include delay($delay);
|
35
|
+
@include function($function);
|
36
|
+
@include fill-mode($fill);
|
37
|
+
@include visibility($visibility);
|
38
|
+
}
|
@@ -0,0 +1,50 @@
|
|
1
|
+
@-webkit-keyframes swing {
|
2
|
+
20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
|
3
|
+
20% { -webkit-transform: rotate(15deg); }
|
4
|
+
40% { -webkit-transform: rotate(-10deg); }
|
5
|
+
60% { -webkit-transform: rotate(5deg); }
|
6
|
+
80% { -webkit-transform: rotate(-5deg); }
|
7
|
+
100% { -webkit-transform: rotate(0deg); }
|
8
|
+
}
|
9
|
+
|
10
|
+
@-moz-keyframes swing {
|
11
|
+
20% { -moz-transform: rotate(15deg); }
|
12
|
+
40% { -moz-transform: rotate(-10deg); }
|
13
|
+
60% { -moz-transform: rotate(5deg); }
|
14
|
+
80% { -moz-transform: rotate(-5deg); }
|
15
|
+
100% { -moz-transform: rotate(0deg); }
|
16
|
+
}
|
17
|
+
|
18
|
+
@-ms-keyframes swing {
|
19
|
+
20% { -ms-transform: rotate(15deg); }
|
20
|
+
40% { -ms-transform: rotate(-10deg); }
|
21
|
+
60% { -ms-transform: rotate(5deg); }
|
22
|
+
80% { -ms-transform: rotate(-5deg); }
|
23
|
+
100% { -ms-transform: rotate(0deg); }
|
24
|
+
}
|
25
|
+
|
26
|
+
@-o-keyframes swing {
|
27
|
+
20% { -o-transform: rotate(15deg); }
|
28
|
+
40% { -o-transform: rotate(-10deg); }
|
29
|
+
60% { -o-transform: rotate(5deg); }
|
30
|
+
80% { -o-transform: rotate(-5deg); }
|
31
|
+
100% { -o-transform: rotate(0deg); }
|
32
|
+
}
|
33
|
+
|
34
|
+
@keyframes swing {
|
35
|
+
20% { transform: rotate(15deg); }
|
36
|
+
40% { transform: rotate(-10deg); }
|
37
|
+
60% { transform: rotate(5deg); }
|
38
|
+
80% { transform: rotate(-5deg); }
|
39
|
+
100% { transform: rotate(0deg); }
|
40
|
+
}
|
41
|
+
|
42
|
+
@mixin swing($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
|
43
|
+
@include transform-origin(top center);
|
44
|
+
@include animation-name(swing);
|
45
|
+
@include duration($duration);
|
46
|
+
@include delay($delay);
|
47
|
+
@include function($function);
|
48
|
+
@include fill-mode($fill);
|
49
|
+
@include visibility($visibility);
|
50
|
+
}
|