compass-animate 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
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/rollOut.scss ADDED
@@ -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
+ }
data/stylesheets/animate/rotateIn.scss ADDED
@@ -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
+ }
data/stylesheets/animate/rotateInDownLeft.scss ADDED
@@ -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
+ }
data/stylesheets/animate/rotateInDownRight.scss ADDED
@@ -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
+ }
data/stylesheets/animate/rotateInUpLeft.scss ADDED
@@ -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
+ }
data/stylesheets/animate/rotateInUpRight.scss ADDED
@@ -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
+ }
data/stylesheets/animate/rotateOut.scss ADDED
@@ -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
+ }
data/stylesheets/animate/rotateOutDownLeft.scss ADDED
@@ -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
+ }
data/stylesheets/animate/rotateOutDownRight.scss ADDED
@@ -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
+ }
data/stylesheets/animate/rotateOutUpLeft.scss ADDED
@@ -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
+ }
data/stylesheets/animate/rotateOutUpRight.scss ADDED
@@ -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
+ }
data/stylesheets/animate/shake.scss ADDED
@@ -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
+ }
data/stylesheets/animate/swing.scss ADDED
@@ -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
+ }