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.
Files changed (61) hide show
  1. data/README.md +33 -0
  2. data/lib/animate.rb +3 -0
  3. data/stylesheets/_animate.scss +234 -0
  4. data/stylesheets/animate/bounce.scss +37 -0
  5. data/stylesheets/animate/bounceIn.scss +43 -0
  6. data/stylesheets/animate/bounceInDown.scss +43 -0
  7. data/stylesheets/animate/bounceInLeft.scss +43 -0
  8. data/stylesheets/animate/bounceInRight.scss +43 -0
  9. data/stylesheets/animate/bounceInUp.scss +43 -0
  10. data/stylesheets/animate/bounceOut.scss +43 -0
  11. data/stylesheets/animate/bounceOutDown.scss +38 -0
  12. data/stylesheets/animate/bounceOutLeft.scss +38 -0
  13. data/stylesheets/animate/bounceOutRight.scss +38 -0
  14. data/stylesheets/animate/bounceOutUp.scss +38 -0
  15. data/stylesheets/animate/fadeIn.scss +33 -0
  16. data/stylesheets/animate/fadeInDown.scss +33 -0
  17. data/stylesheets/animate/fadeInDownBig.scss +33 -0
  18. data/stylesheets/animate/fadeInLeft.scss +33 -0
  19. data/stylesheets/animate/fadeInLeftBig.scss +33 -0
  20. data/stylesheets/animate/fadeInRight.scss +33 -0
  21. data/stylesheets/animate/fadeInRightBig.scss +33 -0
  22. data/stylesheets/animate/fadeInUp.scss +33 -0
  23. data/stylesheets/animate/fadeInUpBig.scss +33 -0
  24. data/stylesheets/animate/fadeOut.scss +33 -0
  25. data/stylesheets/animate/fadeOutDown.scss +33 -0
  26. data/stylesheets/animate/fadeOutDownBig.scss +33 -0
  27. data/stylesheets/animate/fadeOutLeft.scss +33 -0
  28. data/stylesheets/animate/fadeOutLeftBig.scss +33 -0
  29. data/stylesheets/animate/fadeOutRight.scss +33 -0
  30. data/stylesheets/animate/fadeOutRightBig.scss +33 -0
  31. data/stylesheets/animate/fadeOutUp.scss +33 -0
  32. data/stylesheets/animate/fadeOutUpBig.scss +28 -0
  33. data/stylesheets/animate/flash.scss +33 -0
  34. data/stylesheets/animate/flip.scss +41 -0
  35. data/stylesheets/animate/flipInX.scss +33 -0
  36. data/stylesheets/animate/flipInY.scss +39 -0
  37. data/stylesheets/animate/flipOutX.scss +33 -0
  38. data/stylesheets/animate/flipOutY.scss +29 -0
  39. data/stylesheets/animate/hinge.scss +48 -0
  40. data/stylesheets/animate/lightSpeedIn.scss +44 -0
  41. data/stylesheets/animate/lightSpeedOut.scss +34 -0
  42. data/stylesheets/animate/properties.scss +78 -0
  43. data/stylesheets/animate/pulse.scss +40 -0
  44. data/stylesheets/animate/rollIn.scss +35 -0
  45. data/stylesheets/animate/rollOut.scss +35 -0
  46. data/stylesheets/animate/rotateIn.scss +33 -0
  47. data/stylesheets/animate/rotateInDownLeft.scss +33 -0
  48. data/stylesheets/animate/rotateInDownRight.scss +32 -0
  49. data/stylesheets/animate/rotateInUpLeft.scss +33 -0
  50. data/stylesheets/animate/rotateInUpRight.scss +33 -0
  51. data/stylesheets/animate/rotateOut.scss +33 -0
  52. data/stylesheets/animate/rotateOutDownLeft.scss +33 -0
  53. data/stylesheets/animate/rotateOutDownRight.scss +33 -0
  54. data/stylesheets/animate/rotateOutUpLeft.scss +33 -0
  55. data/stylesheets/animate/rotateOutUpRight.scss +33 -0
  56. data/stylesheets/animate/shake.scss +38 -0
  57. data/stylesheets/animate/swing.scss +50 -0
  58. data/stylesheets/animate/tada.scss +48 -0
  59. data/stylesheets/animate/wiggle.scss +78 -0
  60. data/stylesheets/animate/wobble.scss +60 -0
  61. metadata +120 -0
data/stylesheets/animate/fadeInRightBig.scss ADDED
@@ -0,0 +1,33 @@
1
+ @-webkit-keyframes fadeInRightBig {
2
+ 0% {opacity: 0; -webkit-transform: translateX(2000px);}
3
+ 100% {opacity: 1; -webkit-transform: translateX(0);}
4
+ }
5
+
6
+ @-moz-keyframes fadeInRightBig {
7
+ 0% {opacity: 0; -moz-transform: translateX(2000px);}
8
+ 100% {opacity: 1; -moz-transform: translateX(0);}
9
+ }
10
+
11
+ @-ms-keyframes fadeInRightBig {
12
+ 0% {opacity: 0; -ms-transform: translateX(2000px);}
13
+ 100% {opacity: 1; -ms-transform: translateX(0);}
14
+ }
15
+
16
+ @-o-keyframes fadeInRightBig {
17
+ 0% {opacity: 0; -o-transform: translateX(2000px);}
18
+ 100% {opacity: 1; -o-transform: translateX(0);}
19
+ }
20
+
21
+ @keyframes fadeInRightBig {
22
+ 0% {opacity: 0; transform: translateX(2000px);}
23
+ 100% {opacity: 1; transform: translateX(0);}
24
+ }
25
+
26
+ @mixin fadeInRightBig($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
27
+ @include animation-name(fadeInRightBig);
28
+ @include duration($duration);
29
+ @include delay($delay);
30
+ @include function($function);
31
+ @include fill-mode($fill);
32
+ @include visibility($visibility);
33
+ }
data/stylesheets/animate/fadeInUp.scss ADDED
@@ -0,0 +1,33 @@
1
+ @-webkit-keyframes fadeInUp {
2
+ 0% {opacity: 0; -webkit-transform: translateY(20px);}
3
+ 100% {opacity: 1; -webkit-transform: translateY(0);}
4
+ }
5
+
6
+ @-moz-keyframes fadeInUp {
7
+ 0% {opacity: 0; -moz-transform: translateY(20px);}
8
+ 100% {opacity: 1; -moz-transform: translateY(0);}
9
+ }
10
+
11
+ @-ms-keyframes fadeInUp {
12
+ 0% {opacity: 0; -ms-transform: translateY(20px);}
13
+ 100% {opacity: 1; -ms-transform: translateY(0);}
14
+ }
15
+
16
+ @-o-keyframes fadeInUp {
17
+ 0% {opacity: 0; -o-transform: translateY(20px);}
18
+ 100% {opacity: 1; -o-transform: translateY(0);}
19
+ }
20
+
21
+ @keyframes fadeInUp {
22
+ 0% {opacity: 0; transform: translateY(20px);}
23
+ 100% {opacity: 1; transform: translateY(0);}
24
+ }
25
+
26
+ @mixin fadeInUp($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
27
+ @include animation-name(fadeInUp);
28
+ @include duration($duration);
29
+ @include delay($delay);
30
+ @include function($function);
31
+ @include fill-mode($fill);
32
+ @include visibility($visibility);
33
+ }
data/stylesheets/animate/fadeInUpBig.scss ADDED
@@ -0,0 +1,33 @@
1
+ @-webkit-keyframes fadeInUpBig {
2
+ 0% {opacity: 0; -webkit-transform: translateY(2000px);}
3
+ 100% {opacity: 1; -webkit-transform: translateY(0);}
4
+ }
5
+
6
+ @-moz-keyframes fadeInUpBig {
7
+ 0% {opacity: 0; -moz-transform: translateY(2000px);}
8
+ 100% {opacity: 1; -moz-transform: translateY(0);}
9
+ }
10
+
11
+ @-ms-keyframes fadeInUpBig {
12
+ 0% {opacity: 0; -ms-transform: translateY(2000px);}
13
+ 100% {opacity: 1; -ms-transform: translateY(0);}
14
+ }
15
+
16
+ @-o-keyframes fadeInUpBig {
17
+ 0% {opacity: 0; -o-transform: translateY(2000px);}
18
+ 100% {opacity: 1; -o-transform: translateY(0);}
19
+ }
20
+
21
+ @keyframes fadeInUpBig {
22
+ 0% {opacity: 0; transform: translateY(2000px);}
23
+ 100% {opacity: 1; transform: translateY(0);}
24
+ }
25
+
26
+ @mixin fadeInUpBig($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
27
+ @include animation-name(fadeInUpBig);
28
+ @include duration($duration);
29
+ @include delay($delay);
30
+ @include function($function);
31
+ @include fill-mode($fill);
32
+ @include visibility($visibility);
33
+ }
data/stylesheets/animate/fadeOut.scss ADDED
@@ -0,0 +1,33 @@
1
+ @-webkit-keyframes fadeOut {
2
+ 0% {opacity: 1;}
3
+ 100% {opacity: 0;}
4
+ }
5
+
6
+ @-moz-keyframes fadeOut {
7
+ 0% {opacity: 1;}
8
+ 100% {opacity: 0;}
9
+ }
10
+
11
+ @-ms-keyframes fadeOut {
12
+ 0% {opacity: 1;}
13
+ 100% {opacity: 0;}
14
+ }
15
+
16
+ @-o-keyframes fadeOut {
17
+ 0% {opacity: 1;}
18
+ 100% {opacity: 0;}
19
+ }
20
+
21
+ @keyframes fadeOut {
22
+ 0% {opacity: 1;}
23
+ 100% {opacity: 0;}
24
+ }
25
+
26
+ @mixin fadeOut($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
27
+ @include animation-name(fadeOut);
28
+ @include duration($duration);
29
+ @include delay($delay);
30
+ @include function($function);
31
+ @include fill-mode($fill);
32
+ @include visibility($visibility);
33
+ }
data/stylesheets/animate/fadeOutDown.scss ADDED
@@ -0,0 +1,33 @@
1
+ @-webkit-keyframes fadeOutDown {
2
+ 0% {opacity: 1; -webkit-transform: translateY(0);}
3
+ 100% {opacity: 0; -webkit-transform: translateY(20px);}
4
+ }
5
+
6
+ @-moz-keyframes fadeOutDown {
7
+ 0% {opacity: 1; -moz-transform: translateY(0);}
8
+ 100% {opacity: 0; -moz-transform: translateY(20px);}
9
+ }
10
+
11
+ @-ms-keyframes fadeOutDown {
12
+ 0% {opacity: 1; -ms-transform: translateY(0);}
13
+ 100% {opacity: 0; -ms-transform: translateY(20px);}
14
+ }
15
+
16
+ @-o-keyframes fadeOutDown {
17
+ 0% {opacity: 1; -o-transform: translateY(0);}
18
+ 100% {opacity: 0; -o-transform: translateY(20px);}
19
+ }
20
+
21
+ @keyframes fadeOutDown {
22
+ 0% {opacity: 1; transform: translateY(0);}
23
+ 100% {opacity: 0; transform: translateY(20px);}
24
+ }
25
+
26
+ @mixin fadeOutDown($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
27
+ @include animation-name(fadeOutDown);
28
+ @include duration($duration);
29
+ @include delay($delay);
30
+ @include function($function);
31
+ @include fill-mode($fill);
32
+ @include visibility($visibility);
33
+ }
data/stylesheets/animate/fadeOutDownBig.scss ADDED
@@ -0,0 +1,33 @@
1
+ @-webkit-keyframes fadeOutDownBig {
2
+ 0% {opacity: 1; -webkit-transform: translateY(0);}
3
+ 100% {opacity: 0; -webkit-transform: translateY(2000px);}
4
+ }
5
+
6
+ @-moz-keyframes fadeOutDownBig {
7
+ 0% {opacity: 1; -moz-transform: translateY(0);}
8
+ 100% {opacity: 0; -moz-transform: translateY(2000px);}
9
+ }
10
+
11
+ @-ms-keyframes fadeOutDownBig {
12
+ 0% {opacity: 1; -ms-transform: translateY(0);}
13
+ 100% {opacity: 0; -ms-transform: translateY(2000px);}
14
+ }
15
+
16
+ @-o-keyframes fadeOutDownBig {
17
+ 0% {opacity: 1; -o-transform: translateY(0);}
18
+ 100% {opacity: 0; -o-transform: translateY(2000px);}
19
+ }
20
+
21
+ @keyframes fadeOutDownBig {
22
+ 0% {opacity: 1; transform: translateY(0);}
23
+ 100% {opacity: 0; transform: translateY(2000px);}
24
+ }
25
+
26
+ @mixin fadeOutDownBig($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
27
+ @include animation-name(fadeOutDownBig);
28
+ @include duration($duration);
29
+ @include delay($delay);
30
+ @include function($function);
31
+ @include fill-mode($fill);
32
+ @include visibility($visibility);
33
+ }
data/stylesheets/animate/fadeOutLeft.scss ADDED
@@ -0,0 +1,33 @@
1
+ @-webkit-keyframes fadeOutLeft {
2
+ 0% {opacity: 1; -webkit-transform: translateX(0);}
3
+ 100% {opacity: 0; -webkit-transform: translateX(-20px);}
4
+ }
5
+
6
+ @-moz-keyframes fadeOutLeft {
7
+ 0% {opacity: 1; -moz-transform: translateX(0);}
8
+ 100% {opacity: 0; -moz-transform: translateX(-20px);}
9
+ }
10
+
11
+ @-ms-keyframes fadeOutLeft {
12
+ 0% {opacity: 1; -ms-transform: translateX(0);}
13
+ 100% {opacity: 0; -ms-transform: translateX(-20px);}
14
+ }
15
+
16
+ @-o-keyframes fadeOutLeft {
17
+ 0% {opacity: 1; -o-transform: translateX(0);}
18
+ 100% {opacity: 0; -o-transform: translateX(-20px);}
19
+ }
20
+
21
+ @keyframes fadeOutLeft {
22
+ 0% {opacity: 1; transform: translateX(0);}
23
+ 100% {opacity: 0; transform: translateX(-20px);}
24
+ }
25
+
26
+ @mixin fadeOutLeft($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
27
+ @include animation-name(fadeOutLeft);
28
+ @include duration($duration);
29
+ @include delay($delay);
30
+ @include function($function);
31
+ @include fill-mode($fill);
32
+ @include visibility($visibility);
33
+ }
data/stylesheets/animate/fadeOutLeftBig.scss ADDED
@@ -0,0 +1,33 @@
1
+ @-webkit-keyframes fadeOutLeftBig {
2
+ 0% {opacity: 1; -webkit-transform: translateX(0);}
3
+ 100% {opacity: 0; -webkit-transform: translateX(-2000px);}
4
+ }
5
+
6
+ @-moz-keyframes fadeOutLeftBig {
7
+ 0% {opacity: 1; -moz-transform: translateX(0);}
8
+ 100% {opacity: 0; -moz-transform: translateX(-2000px);}
9
+ }
10
+
11
+ @-ms-keyframes fadeOutLeftBig {
12
+ 0% {opacity: 1; -ms-transform: translateX(0);}
13
+ 100% {opacity: 0; -ms-transform: translateX(-2000px);}
14
+ }
15
+
16
+ @-o-keyframes fadeOutLeftBig {
17
+ 0% {opacity: 1; -o-transform: translateX(0);}
18
+ 100% {opacity: 0; -o-transform: translateX(-2000px);}
19
+ }
20
+
21
+ @keyframes fadeOutLeftBig {
22
+ 0% {opacity: 1; transform: translateX(0);}
23
+ 100% {opacity: 0; transform: translateX(-2000px);}
24
+ }
25
+
26
+ @mixin fadeOutLeftBig($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
27
+ @include animation-name(fadeOutLeftBig);
28
+ @include duration($duration);
29
+ @include delay($delay);
30
+ @include function($function);
31
+ @include fill-mode($fill);
32
+ @include visibility($visibility);
33
+ }
data/stylesheets/animate/fadeOutRight.scss ADDED
@@ -0,0 +1,33 @@
1
+ @-webkit-keyframes fadeOutRight {
2
+ 0% {opacity: 1; -webkit-transform: translateX(0);}
3
+ 100% {opacity: 0; -webkit-transform: translateX(20px);}
4
+ }
5
+
6
+ @-moz-keyframes fadeOutRight {
7
+ 0% {opacity: 1; -moz-transform: translateX(0);}
8
+ 100% {opacity: 0; -moz-transform: translateX(20px);}
9
+ }
10
+
11
+ @-ms-keyframes fadeOutRight {
12
+ 0% {opacity: 1; -ms-transform: translateX(0);}
13
+ 100% {opacity: 0; -ms-transform: translateX(20px);}
14
+ }
15
+
16
+ @-o-keyframes fadeOutRight {
17
+ 0% {opacity: 1; -o-transform: translateX(0);}
18
+ 100% {opacity: 0; -o-transform: translateX(20px);}
19
+ }
20
+
21
+ @keyframes fadeOutRight {
22
+ 0% {opacity: 1; transform: translateX(0);}
23
+ 100% {opacity: 0; transform: translateX(20px);}
24
+ }
25
+
26
+ @mixin fadeOutRight($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
27
+ @include animation-name(fadeOutRight);
28
+ @include duration($duration);
29
+ @include delay($delay);
30
+ @include function($function);
31
+ @include fill-mode($fill);
32
+ @include visibility($visibility);
33
+ }
data/stylesheets/animate/fadeOutRightBig.scss ADDED
@@ -0,0 +1,33 @@
1
+ @-webkit-keyframes fadeOutRightBig {
2
+ 0% {opacity: 1; -webkit-transform: translateX(0);}
3
+ 100% {opacity: 0; -webkit-transform: translateX(2000px);}
4
+ }
5
+
6
+ @-moz-keyframes fadeOutRightBig {
7
+ 0% {opacity: 1; -moz-transform: translateX(0);}
8
+ 100% {opacity: 0; -moz-transform: translateX(2000px);}
9
+ }
10
+
11
+ @-ms-keyframes fadeOutRightBig {
12
+ 0% {opacity: 1; -ms-transform: translateX(0);}
13
+ 100% {opacity: 0; -ms-transform: translateX(2000px);}
14
+ }
15
+
16
+ @-o-keyframes fadeOutRightBig {
17
+ 0% {opacity: 1; -o-transform: translateX(0);}
18
+ 100% {opacity: 0; -o-transform: translateX(2000px);}
19
+ }
20
+
21
+ @keyframes fadeOutRightBig {
22
+ 0% {opacity: 1; transform: translateX(0);}
23
+ 100% {opacity: 0; transform: translateX(2000px);}
24
+ }
25
+
26
+ @mixin fadeOutRightBig($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
27
+ @include animation-name(fadeOutRightBig);
28
+ @include duration($duration);
29
+ @include delay($delay);
30
+ @include function($function);
31
+ @include fill-mode($fill);
32
+ @include visibility($visibility);
33
+ }
data/stylesheets/animate/fadeOutUp.scss ADDED
@@ -0,0 +1,33 @@
1
+ @-webkit-keyframes fadeOutUp {
2
+ 0% {opacity: 1; -webkit-transform: translateY(0);}
3
+ 100% {opacity: 0; -webkit-transform: translateY(-20px);}
4
+ }
5
+
6
+ @-moz-keyframes fadeOutUp {
7
+ 0% {opacity: 1; -moz-transform: translateY(0);}
8
+ 100% {opacity: 0; -moz-transform: translateY(-20px);}
9
+ }
10
+
11
+ @-ms-keyframes fadeOutUp {
12
+ 0% {opacity: 1; -ms-transform: translateY(0);}
13
+ 100% {opacity: 0; -ms-transform: translateY(-20px);}
14
+ }
15
+
16
+ @-o-keyframes fadeOutUp {
17
+ 0% {opacity: 1; -o-transform: translateY(0);}
18
+ 100% {opacity: 0; -o-transform: translateY(-20px);}
19
+ }
20
+
21
+ @keyframes fadeOutUp {
22
+ 0% {opacity: 1; transform: translateY(0);}
23
+ 100% {opacity: 0; transform: translateY(-20px);}
24
+ }
25
+
26
+ @mixin fadeOutUp($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
27
+ @include animation-name(fadeOutUp);
28
+ @include duration($duration);
29
+ @include delay($delay);
30
+ @include function($function);
31
+ @include fill-mode($fill);
32
+ @include visibility($visibility);
33
+ }
data/stylesheets/animate/fadeOutUpBig.scss ADDED
@@ -0,0 +1,28 @@
1
+ @-webkit-keyframes fadeOutUpBig {
2
+ 0% {opacity: 1; -webkit-transform: translateY(0);}
3
+ 100% {opacity: 0; -webkit-transform: translateY(-2000px);}
4
+ }
5
+
6
+ @-moz-keyframes fadeOutUpBig {
7
+ 0% {opacity: 1; -moz-transform: translateY(0);}
8
+ 100% {opacity: 0; -moz-transform: translateY(-2000px);}
9
+ }
10
+
11
+ @-o-keyframes fadeOutUpBig {
12
+ 0% {opacity: 1; -o-transform: translateY(0);}
13
+ 100% {opacity: 0; -o-transform: translateY(-2000px);}
14
+ }
15
+
16
+ @keyframes fadeOutUpBig {
17
+ 0% {opacity: 1; transform: translateY(0);}
18
+ 100% {opacity: 0; transform: translateY(-2000px);}
19
+ }
20
+
21
+ @mixin fadeOutUpBig($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
22
+ @include animation-name(fadeOutUpBig);
23
+ @include duration($duration);
24
+ @include delay($delay);
25
+ @include function($function);
26
+ @include fill-mode($fill);
27
+ @include visibility($visibility);
28
+ }
data/stylesheets/animate/flash.scss ADDED
@@ -0,0 +1,33 @@
1
+ @-webkit-keyframes flash {
2
+ 0%, 50%, 100% {opacity: 1;}
3
+ 25%, 75% {opacity: 0;}
4
+ }
5
+
6
+ @-moz-keyframes flash {
7
+ 0%, 50%, 100% {opacity: 1;}
8
+ 25%, 75% {opacity: 0;}
9
+ }
10
+
11
+ @-ms-keyframes flash {
12
+ 0%, 50%, 100% {opacity: 1;}
13
+ 25%, 75% {opacity: 0;}
14
+ }
15
+
16
+ @-o-keyframes flash {
17
+ 0%, 50%, 100% {opacity: 1;}
18
+ 25%, 75% {opacity: 0;}
19
+ }
20
+
21
+ @keyframes flash {
22
+ 0%, 50%, 100% {opacity: 1;}
23
+ 25%, 75% {opacity: 0;}
24
+ }
25
+
26
+ @mixin flash($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
27
+ @include animation-name(flash);
28
+ @include duration($duration);
29
+ @include delay($delay);
30
+ @include function($function);
31
+ @include fill-mode($fill);
32
+ @include visibility($visibility);
33
+ }