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/bounceInUp.scss ADDED
@@ -0,0 +1,43 @@
1
+ @-webkit-keyframes bounceInUp {
2
+ 0% {opacity: 0; -webkit-transform: translateY(2000px);}
3
+ 60% {opacity: 1; -webkit-transform: translateY(-30px);}
4
+ 80% {-webkit-transform: translateY(10px);}
5
+ 100% {-webkit-transform: translateY(0);}
6
+ }
7
+
8
+ @-moz-keyframes bounceInUp {
9
+ 0% {opacity: 0; -moz-transform: translateY(2000px);}
10
+ 60% {opacity: 1; -moz-transform: translateY(-30px);}
11
+ 80% {-moz-transform: translateY(10px);}
12
+ 100% {-moz-transform: translateY(0);}
13
+ }
14
+
15
+ @-ms-keyframes bounceInUp {
16
+ 0% {opacity: 0; -ms-transform: translateY(2000px);}
17
+ 60% {opacity: 1; -ms-transform: translateY(-30px);}
18
+ 80% {-ms-transform: translateY(10px);}
19
+ 100% {-ms-transform: translateY(0);}
20
+ }
21
+
22
+ @-o-keyframes bounceInUp {
23
+ 0% {opacity: 0; -o-transform: translateY(2000px);}
24
+ 60% {opacity: 1; -o-transform: translateY(-30px);}
25
+ 80% {-o-transform: translateY(10px);}
26
+ 100% {-o-transform: translateY(0);}
27
+ }
28
+
29
+ @keyframes bounceInUp {
30
+ 0% {opacity: 0; transform: translateY(2000px);}
31
+ 60% {opacity: 1; transform: translateY(-30px);}
32
+ 80% {transform: translateY(10px);}
33
+ 100% {transform: translateY(0);}
34
+ }
35
+
36
+ @mixin bounceInUp($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
37
+ @include animation-name(bounceInUp);
38
+ @include duration($duration);
39
+ @include delay($delay);
40
+ @include function($function);
41
+ @include fill-mode($fill);
42
+ @include visibility($visibility);
43
+ }
data/stylesheets/animate/bounceOut.scss ADDED
@@ -0,0 +1,43 @@
1
+ @-webkit-keyframes bounceOut {
2
+ 0% {-webkit-transform: scale(1);}
3
+ 25% {-webkit-transform: scale(.95);}
4
+ 50% {opacity: 1; -webkit-transform: scale(1.1);}
5
+ 100% {opacity: 0; -webkit-transform: scale(.3);}
6
+ }
7
+
8
+ @-moz-keyframes bounceOut {
9
+ 0% {-moz-transform: scale(1);}
10
+ 25% {-moz-transform: scale(.95);}
11
+ 50% {opacity: 1; -moz-transform: scale(1.1);}
12
+ 100% {opacity: 0; -moz-transform: scale(.3);}
13
+ }
14
+
15
+ @-ms-keyframes bounceOut {
16
+ 0% {-ms-transform: scale(1);}
17
+ 25% {-ms-transform: scale(.95);}
18
+ 50% {opacity: 1; -ms-transform: scale(1.1);}
19
+ 100% {opacity: 0; -ms-transform: scale(.3);}
20
+ }
21
+
22
+ @-o-keyframes bounceOut {
23
+ 0% {-o-transform: scale(1);}
24
+ 25% {-o-transform: scale(.95);}
25
+ 50% {opacity: 1; -o-transform: scale(1.1);}
26
+ 100% {opacity: 0; -o-transform: scale(.3);}
27
+ }
28
+
29
+ @keyframes bounceOut {
30
+ 0% {transform: scale(1);}
31
+ 25% {transform: scale(.95);}
32
+ 50% {opacity: 1; transform: scale(1.1);}
33
+ 100% {opacity: 0; transform: scale(.3);}
34
+ }
35
+
36
+ @mixin bounceOut($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
37
+ @include animation-name(bounceOut);
38
+ @include duration($duration);
39
+ @include delay($delay);
40
+ @include function($function);
41
+ @include fill-mode($fill);
42
+ @include visibility($visibility);
43
+ }
data/stylesheets/animate/bounceOutDown.scss ADDED
@@ -0,0 +1,38 @@
1
+ @-webkit-keyframes bounceOutDown {
2
+ 0% {-webkit-transform: translateY(0);}
3
+ 20% {opacity: 1; -webkit-transform: translateY(-20px);}
4
+ 100% {opacity: 0; -webkit-transform: translateY(2000px);}
5
+ }
6
+
7
+ @-moz-keyframes bounceOutDown {
8
+ 0% {-moz-transform: translateY(0);}
9
+ 20% {opacity: 1; -moz-transform: translateY(-20px);}
10
+ 100% {opacity: 0; -moz-transform: translateY(2000px);}
11
+ }
12
+
13
+ @-ms-keyframes bounceOutDown {
14
+ 0% {-ms-transform: translateY(0);}
15
+ 20% {opacity: 1; -ms-transform: translateY(-20px);}
16
+ 100% {opacity: 0; -ms-transform: translateY(2000px);}
17
+ }
18
+
19
+ @-o-keyframes bounceOutDown {
20
+ 0% {-o-transform: translateY(0);}
21
+ 20% {opacity: 1; -o-transform: translateY(-20px);}
22
+ 100% {opacity: 0; -o-transform: translateY(2000px);}
23
+ }
24
+
25
+ @keyframes bounceOutDown {
26
+ 0% {transform: translateY(0);}
27
+ 20% {opacity: 1; transform: translateY(-20px);}
28
+ 100% {opacity: 0; transform: translateY(2000px);}
29
+ }
30
+
31
+ @mixin bounceOutDown($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
32
+ @include animation-name(bounceOutDown);
33
+ @include duration($duration);
34
+ @include delay($delay);
35
+ @include function($function);
36
+ @include fill-mode($fill);
37
+ @include visibility($visibility);
38
+ }
data/stylesheets/animate/bounceOutLeft.scss ADDED
@@ -0,0 +1,38 @@
1
+ @-webkit-keyframes bounceOutLeft {
2
+ 0% {-webkit-transform: translateX(0);}
3
+ 20% {opacity: 1; -webkit-transform: translateX(20px);}
4
+ 100% {opacity: 0; -webkit-transform: translateX(-2000px);}
5
+ }
6
+
7
+ @-moz-keyframes bounceOutLeft {
8
+ 0% {-moz-transform: translateX(0);}
9
+ 20% {opacity: 1; -moz-transform: translateX(20px);}
10
+ 100% {opacity: 0; -moz-transform: translateX(-2000px);}
11
+ }
12
+
13
+ @-ms-keyframes bounceOutLeft {
14
+ 0% {-ms-transform: translateX(0);}
15
+ 20% {opacity: 1; -ms-transform: translateX(20px);}
16
+ 100% {opacity: 0; -ms-transform: translateX(-2000px);}
17
+ }
18
+
19
+ @-o-keyframes bounceOutLeft {
20
+ 0% {-o-transform: translateX(0);}
21
+ 20% {opacity: 1; -o-transform: translateX(20px);}
22
+ 100% {opacity: 0; -o-transform: translateX(-2000px);}
23
+ }
24
+
25
+ @keyframes bounceOutLeft {
26
+ 0% {transform: translateX(0);}
27
+ 20% {opacity: 1; transform: translateX(20px);}
28
+ 100% {opacity: 0; transform: translateX(-2000px);}
29
+ }
30
+
31
+ @mixin bounceOutLeft($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
32
+ @include animation-name(bounceOutLeft);
33
+ @include duration($duration);
34
+ @include delay($delay);
35
+ @include function($function);
36
+ @include fill-mode($fill);
37
+ @include visibility($visibility);
38
+ }
data/stylesheets/animate/bounceOutRight.scss ADDED
@@ -0,0 +1,38 @@
1
+ @-webkit-keyframes bounceOutRight {
2
+ 0% {-webkit-transform: translateX(0);}
3
+ 20% {opacity: 1; -webkit-transform: translateX(-20px);}
4
+ 100% {opacity: 0; -webkit-transform: translateX(2000px);}
5
+ }
6
+
7
+ @-moz-keyframes bounceOutRight {
8
+ 0% {-moz-transform: translateX(0);}
9
+ 20% {opacity: 1; -moz-transform: translateX(-20px);}
10
+ 100% {opacity: 0; -moz-transform: translateX(2000px);}
11
+ }
12
+
13
+ @-ms-keyframes bounceOutRight {
14
+ 0% {-ms-transform: translateX(0);}
15
+ 20% {opacity: 1; -ms-transform: translateX(-20px);}
16
+ 100% {opacity: 0; -ms-transform: translateX(2000px);}
17
+ }
18
+
19
+ @-o-keyframes bounceOutRight {
20
+ 0% {-o-transform: translateX(0);}
21
+ 20% {opacity: 1; -o-transform: translateX(-20px);}
22
+ 100% {opacity: 0; -o-transform: translateX(2000px);}
23
+ }
24
+
25
+ @keyframes bounceOutRight {
26
+ 0% {transform: translateX(0);}
27
+ 20% {opacity: 1; transform: translateX(-20px);}
28
+ 100% {opacity: 0; transform: translateX(2000px);}
29
+ }
30
+
31
+ @mixin bounceOutRight($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
32
+ @include animation-name(bounceOutRight);
33
+ @include duration($duration);
34
+ @include delay($delay);
35
+ @include function($function);
36
+ @include fill-mode($fill);
37
+ @include visibility($visibility);
38
+ }
data/stylesheets/animate/bounceOutUp.scss ADDED
@@ -0,0 +1,38 @@
1
+ @-webkit-keyframes bounceOutUp {
2
+ 0% {-webkit-transform: translateY(0);}
3
+ 20% {opacity: 1; -webkit-transform: translateY(20px);}
4
+ 100% {opacity: 0; -webkit-transform: translateY(-2000px);}
5
+ }
6
+
7
+ @-moz-keyframes bounceOutUp {
8
+ 0% {-moz-transform: translateY(0);}
9
+ 20% {opacity: 1; -moz-transform: translateY(20px);}
10
+ 100% {opacity: 0; -moz-transform: translateY(-2000px);}
11
+ }
12
+
13
+ @-ms-keyframes bounceOutUp {
14
+ 0% {-ms-transform: translateY(0);}
15
+ 20% {opacity: 1; -ms-transform: translateY(20px);}
16
+ 100% {opacity: 0; -ms-transform: translateY(-2000px);}
17
+ }
18
+
19
+ @-o-keyframes bounceOutUp {
20
+ 0% {-o-transform: translateY(0);}
21
+ 20% {opacity: 1; -o-transform: translateY(20px);}
22
+ 100% {opacity: 0; -o-transform: translateY(-2000px);}
23
+ }
24
+
25
+ @keyframes bounceOutUp {
26
+ 0% {transform: translateY(0);}
27
+ 20% {opacity: 1; transform: translateY(20px);}
28
+ 100% {opacity: 0; transform: translateY(-2000px);}
29
+ }
30
+
31
+ @mixin bounceOutUp($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
32
+ @include animation-name(bounceOutUp);
33
+ @include duration($duration);
34
+ @include delay($delay);
35
+ @include function($function);
36
+ @include fill-mode($fill);
37
+ @include visibility($visibility);
38
+ }
data/stylesheets/animate/fadeIn.scss ADDED
@@ -0,0 +1,33 @@
1
+ @-webkit-keyframes fadeIn {
2
+ 0% {opacity: 0;}
3
+ 100% {opacity: 1;}
4
+ }
5
+
6
+ @-moz-keyframes fadeIn {
7
+ 0% {opacity: 0;}
8
+ 100% {opacity: 1;}
9
+ }
10
+
11
+ @-ms-keyframes fadeIn {
12
+ 0% {opacity: 0;}
13
+ 100% {opacity: 1;}
14
+ }
15
+
16
+ @-o-keyframes fadeIn {
17
+ 0% {opacity: 0;}
18
+ 100% {opacity: 1;}
19
+ }
20
+
21
+ @keyframes fadeIn {
22
+ 0% {opacity: 0;}
23
+ 100% {opacity: 1;}
24
+ }
25
+
26
+ @mixin fadeIn($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
27
+ @include animation-name(fadeIn);
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/fadeInDown.scss ADDED
@@ -0,0 +1,33 @@
1
+ @-webkit-keyframes fadeInDown {
2
+ 0% {opacity: 0; -webkit-transform: translateY(-20px);}
3
+ 100% {opacity: 1; -webkit-transform: translateY(0);}
4
+ }
5
+
6
+ @-moz-keyframes fadeInDown {
7
+ 0% {opacity: 0; -moz-transform: translateY(-20px);}
8
+ 100% {opacity: 1; -moz-transform: translateY(0);}
9
+ }
10
+
11
+ @-ms-keyframes fadeInDown {
12
+ 0% {opacity: 0; -ms-transform: translateY(-20px);}
13
+ 100% {opacity: 1; -ms-transform: translateY(0);}
14
+ }
15
+
16
+ @-o-keyframes fadeInDown {
17
+ 0% {opacity: 0; -ms-transform: translateY(-20px);}
18
+ 100% {opacity: 1; -ms-transform: translateY(0);}
19
+ }
20
+
21
+ @keyframes fadeInDown {
22
+ 0% {opacity: 0; transform: translateY(-20px);}
23
+ 100% {opacity: 1; transform: translateY(0);}
24
+ }
25
+
26
+ @mixin fadeInDown($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
27
+ @include animation-name(fadeInDown);
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/fadeInDownBig.scss ADDED
@@ -0,0 +1,33 @@
1
+ @-webkit-keyframes fadeInDownBig {
2
+ 0% {opacity: 0; -webkit-transform: translateY(-2000px);}
3
+ 100% {opacity: 1; -webkit-transform: translateY(0);}
4
+ }
5
+
6
+ @-moz-keyframes fadeInDownBig {
7
+ 0% {opacity: 0; -moz-transform: translateY(-2000px);}
8
+ 100% {opacity: 1; -moz-transform: translateY(0);}
9
+ }
10
+
11
+ @-ms-keyframes fadeInDownBig {
12
+ 0% {opacity: 0; -ms-transform: translateY(-2000px);}
13
+ 100% {opacity: 1; -ms-transform: translateY(0);}
14
+ }
15
+
16
+ @-o-keyframes fadeInDownBig {
17
+ 0% {opacity: 0; -o-transform: translateY(-2000px);}
18
+ 100% {opacity: 1; -o-transform: translateY(0);}
19
+ }
20
+
21
+ @keyframes fadeInDownBig {
22
+ 0% {opacity: 0; transform: translateY(-2000px);}
23
+ 100% {opacity: 1; transform: translateY(0);}
24
+ }
25
+
26
+ @mixin fadeInDownBig($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
27
+ @include animation-name(fadeInDownBig);
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/fadeInLeft.scss ADDED
@@ -0,0 +1,33 @@
1
+ @-webkit-keyframes fadeInLeft {
2
+ 0% {opacity: 0; -webkit-transform: translateX(-20px);}
3
+ 100% {opacity: 1; -webkit-transform: translateX(0);}
4
+ }
5
+
6
+ @-moz-keyframes fadeInLeft {
7
+ 0% {opacity: 0; -moz-transform: translateX(-20px);}
8
+ 100% {opacity: 1; -moz-transform: translateX(0);}
9
+ }
10
+
11
+ @-ms-keyframes fadeInLeft {
12
+ 0% {opacity: 0; -ms-transform: translateX(-20px);}
13
+ 100% {opacity: 1; -ms-transform: translateX(0);}
14
+ }
15
+
16
+ @-o-keyframes fadeInLeft {
17
+ 0% {opacity: 0; -o-transform: translateX(-20px);}
18
+ 100% {opacity: 1; -o-transform: translateX(0);}
19
+ }
20
+
21
+ @keyframes fadeInLeft {
22
+ 0% {opacity: 0; transform: translateX(-20px);}
23
+ 100% {opacity: 1; transform: translateX(0);}
24
+ }
25
+
26
+ @mixin fadeInLeft($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
27
+ @include animation-name(fadeInLeft);
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/fadeInLeftBig.scss ADDED
@@ -0,0 +1,33 @@
1
+ @-webkit-keyframes fadeInLeftBig {
2
+ 0% {opacity: 0; -webkit-transform: translateX(-2000px);}
3
+ 100% {opacity: 1; -webkit-transform: translateX(0);}
4
+ }
5
+
6
+ @-moz-keyframes fadeInLeftBig {
7
+ 0% {opacity: 0; -moz-transform: translateX(-2000px);}
8
+ 100% {opacity: 1; -moz-transform: translateX(0);}
9
+ }
10
+
11
+ @-ms-keyframes fadeInLeftBig {
12
+ 0% {opacity: 0; -ms-transform: translateX(-2000px);}
13
+ 100% {opacity: 1; -ms-transform: translateX(0);}
14
+ }
15
+
16
+ @-o-keyframes fadeInLeftBig {
17
+ 0% {opacity: 0; -o-transform: translateX(-2000px);}
18
+ 100% {opacity: 1; -o-transform: translateX(0);}
19
+ }
20
+
21
+ @keyframes fadeInLeftBig {
22
+ 0% {opacity: 0; transform: translateX(-2000px);}
23
+ 100% {opacity: 1; transform: translateX(0);}
24
+ }
25
+
26
+ @mixin fadeInLeftBig($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
27
+ @include animation-name(fadeInLeftBig);
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/fadeInRight.scss ADDED
@@ -0,0 +1,33 @@
1
+ @-webkit-keyframes fadeInRight {
2
+ 0% {opacity: 0; -webkit-transform: translateX(20px);}
3
+ 100% {opacity: 1; -webkit-transform: translateX(0);}
4
+ }
5
+
6
+ @-moz-keyframes fadeInRight {
7
+ 0% {opacity: 0; -moz-transform: translateX(20px);}
8
+ 100% {opacity: 1; -moz-transform: translateX(0);}
9
+ }
10
+
11
+ @-ms-keyframes fadeInRight {
12
+ 0% {opacity: 0; -ms-transform: translateX(20px);}
13
+ 100% {opacity: 1; -ms-transform: translateX(0);}
14
+ }
15
+
16
+ @-o-keyframes fadeInRight {
17
+ 0% {opacity: 0; -o-transform: translateX(20px);}
18
+ 100% {opacity: 1; -o-transform: translateX(0);}
19
+ }
20
+
21
+ @keyframes fadeInRight {
22
+ 0% {opacity: 0; transform: translateX(20px);}
23
+ 100% {opacity: 1; transform: translateX(0);}
24
+ }
25
+
26
+ @mixin fadeInRight($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
27
+ @include animation-name(fadeInRight);
28
+ @include duration($duration);
29
+ @include delay($delay);
30
+ @include function($function);
31
+ @include fill-mode($fill);
32
+ @include visibility($visibility);
33
+ }