animate-scss 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (68) hide show
  1. data/.gitignore +17 -0
  2. data/.gitmodules +3 -0
  3. data/Gemfile +4 -0
  4. data/LICENSE.txt +22 -0
  5. data/README.md +58 -0
  6. data/Rakefile +7 -0
  7. data/animate-scss.gemspec +25 -0
  8. data/lib/animate-scss.rb +2 -0
  9. data/lib/animate/engine.rb +4 -0
  10. data/lib/animate/version.rb +3 -0
  11. data/vendor/assets/stylesheets/animate.scss +24 -0
  12. data/vendor/assets/stylesheets/animate/bounce.css +29 -0
  13. data/vendor/assets/stylesheets/animate/bounceIn.css +86 -0
  14. data/vendor/assets/stylesheets/animate/bounceInDown.css +86 -0
  15. data/vendor/assets/stylesheets/animate/bounceInLeft.css +86 -0
  16. data/vendor/assets/stylesheets/animate/bounceInRight.css +86 -0
  17. data/vendor/assets/stylesheets/animate/bounceInUp.css +85 -0
  18. data/vendor/assets/stylesheets/animate/bounceOut.css +86 -0
  19. data/vendor/assets/stylesheets/animate/bounceOutDown.css +70 -0
  20. data/vendor/assets/stylesheets/animate/bounceOutLeft.css +70 -0
  21. data/vendor/assets/stylesheets/animate/bounceOutRight.css +70 -0
  22. data/vendor/assets/stylesheets/animate/bounceOutUp.css +70 -0
  23. data/vendor/assets/stylesheets/animate/fadeIn.css +26 -0
  24. data/vendor/assets/stylesheets/animate/fadeInDown.css +54 -0
  25. data/vendor/assets/stylesheets/animate/fadeInDownBig.css +54 -0
  26. data/vendor/assets/stylesheets/animate/fadeInLeft.css +54 -0
  27. data/vendor/assets/stylesheets/animate/fadeInLeftBig.css +51 -0
  28. data/vendor/assets/stylesheets/animate/fadeInRight.css +54 -0
  29. data/vendor/assets/stylesheets/animate/fadeInRightBig.css +54 -0
  30. data/vendor/assets/stylesheets/animate/fadeInUp.css +54 -0
  31. data/vendor/assets/stylesheets/animate/fadeInUpBig.css +54 -0
  32. data/vendor/assets/stylesheets/animate/fadeOut.css +26 -0
  33. data/vendor/assets/stylesheets/animate/fadeOutDown.css +54 -0
  34. data/vendor/assets/stylesheets/animate/fadeOutDownBig.css +54 -0
  35. data/vendor/assets/stylesheets/animate/fadeOutLeft.css +54 -0
  36. data/vendor/assets/stylesheets/animate/fadeOutLeftBig.css +54 -0
  37. data/vendor/assets/stylesheets/animate/fadeOutRight.css +54 -0
  38. data/vendor/assets/stylesheets/animate/fadeOutRightBig.css +51 -0
  39. data/vendor/assets/stylesheets/animate/fadeOutUp.css +51 -0
  40. data/vendor/assets/stylesheets/animate/fadeOutUpBig.css +54 -0
  41. data/vendor/assets/stylesheets/animate/flash.css +26 -0
  42. data/vendor/assets/stylesheets/animate/flip.css +103 -0
  43. data/vendor/assets/stylesheets/animate/flipInX.css +87 -0
  44. data/vendor/assets/stylesheets/animate/flipInY.css +87 -0
  45. data/vendor/assets/stylesheets/animate/flipOutX.css +54 -0
  46. data/vendor/assets/stylesheets/animate/flipOutY.css +51 -0
  47. data/vendor/assets/stylesheets/animate/hinge.css +38 -0
  48. data/vendor/assets/stylesheets/animate/lightSpeedIn.css +39 -0
  49. data/vendor/assets/stylesheets/animate/lightSpeedOut.css +31 -0
  50. data/vendor/assets/stylesheets/animate/pulse.css +29 -0
  51. data/vendor/assets/stylesheets/animate/rollIn.css +28 -0
  52. data/vendor/assets/stylesheets/animate/rollOut.css +56 -0
  53. data/vendor/assets/stylesheets/animate/rotateIn.css +59 -0
  54. data/vendor/assets/stylesheets/animate/rotateInDownLeft.css +62 -0
  55. data/vendor/assets/stylesheets/animate/rotateInDownRight.css +62 -0
  56. data/vendor/assets/stylesheets/animate/rotateInUpLeft.css +62 -0
  57. data/vendor/assets/stylesheets/animate/rotateInUpRight.css +62 -0
  58. data/vendor/assets/stylesheets/animate/rotateOut.css +62 -0
  59. data/vendor/assets/stylesheets/animate/rotateOutDownLeft.css +62 -0
  60. data/vendor/assets/stylesheets/animate/rotateOutDownRight.css +62 -0
  61. data/vendor/assets/stylesheets/animate/rotateOutUpLeft.css +62 -0
  62. data/vendor/assets/stylesheets/animate/rotateOutUpRight.css +62 -0
  63. data/vendor/assets/stylesheets/animate/shake.css +30 -0
  64. data/vendor/assets/stylesheets/animate/swing.css +43 -0
  65. data/vendor/assets/stylesheets/animate/tada.css +38 -0
  66. data/vendor/assets/stylesheets/animate/wiggle.css +67 -0
  67. data/vendor/assets/stylesheets/animate/wobble.css +48 -0
  68. metadata +167 -0
@@ -0,0 +1,38 @@
1
+ @-webkit-keyframes hinge {
2
+ 0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
3
+ 20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
4
+ 40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
5
+ 80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
6
+ 100% { -webkit-transform: translateY(700px); opacity: 0; }
7
+ }
8
+
9
+ @-moz-keyframes hinge {
10
+ 0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
11
+ 20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
12
+ 40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
13
+ 80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
14
+ 100% { -moz-transform: translateY(700px); opacity: 0; }
15
+ }
16
+
17
+ @-o-keyframes hinge {
18
+ 0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
19
+ 20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
20
+ 40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
21
+ 80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
22
+ 100% { -o-transform: translateY(700px); opacity: 0; }
23
+ }
24
+
25
+ @keyframes hinge {
26
+ 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }
27
+ 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }
28
+ 40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }
29
+ 80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; }
30
+ 100% { transform: translateY(700px); opacity: 0; }
31
+ }
32
+
33
+ .hinge {
34
+ -webkit-animation-name: hinge;
35
+ -moz-animation-name: hinge;
36
+ -o-animation-name: hinge;
37
+ animation-name: hinge;
38
+ }
@@ -0,0 +1,39 @@
1
+ @-webkit-keyframes lightSpeedIn {
2
+ 0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
3
+ 60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; }
4
+ 80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; }
5
+ 100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
6
+ }
7
+
8
+ @-moz-keyframes lightSpeedIn {
9
+ 0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
10
+ 60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; }
11
+ 80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; }
12
+ 100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
13
+ }
14
+
15
+ @-o-keyframes lightSpeedIn {
16
+ 0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
17
+ 60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; }
18
+ 80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; }
19
+ 100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
20
+ }
21
+
22
+ @keyframes lightSpeedIn {
23
+ 0% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
24
+ 60% { transform: translateX(-20%) skewX(30deg); opacity: 1; }
25
+ 80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
26
+ 100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
27
+ }
28
+
29
+ .lightSpeedIn {
30
+ -webkit-animation-name: lightSpeedIn;
31
+ -moz-animation-name: lightSpeedIn;
32
+ -o-animation-name: lightSpeedIn;
33
+ animation-name: lightSpeedIn;
34
+
35
+ -webkit-animation-timing-function: ease-out;
36
+ -moz-animation-timing-function: ease-out;
37
+ -o-animation-timing-function: ease-out;
38
+ animation-timing-function: ease-out;
39
+ }
@@ -0,0 +1,31 @@
1
+ @-webkit-keyframes lightSpeedOut {
2
+ 0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
3
+ 100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
4
+ }
5
+
6
+ @-moz-keyframes lightSpeedOut {
7
+ 0% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
8
+ 100% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
9
+ }
10
+
11
+ @-o-keyframes lightSpeedOut {
12
+ 0% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
13
+ 100% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
14
+ }
15
+
16
+ @keyframes lightSpeedOut {
17
+ 0% { transform: translateX(0%) skewX(0deg); opacity: 1; }
18
+ 100% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
19
+ }
20
+
21
+ .lightSpeedOut {
22
+ -webkit-animation-name: lightSpeedOut;
23
+ -moz-animation-name: lightSpeedOut;
24
+ -o-animation-name: lightSpeedOut;
25
+ animation-name: lightSpeedOut;
26
+
27
+ -webkit-animation-timing-function: ease-in;
28
+ -moz-animation-timing-function: ease-in;
29
+ -o-animation-timing-function: ease-in;
30
+ animation-timing-function: ease-in;
31
+ }
@@ -0,0 +1,29 @@
1
+ /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
2
+
3
+ @-webkit-keyframes pulse {
4
+ 0% { -webkit-transform: scale(1); }
5
+ 50% { -webkit-transform: scale(1.1); }
6
+ 100% { -webkit-transform: scale(1); }
7
+ }
8
+ @-moz-keyframes pulse {
9
+ 0% { -moz-transform: scale(1); }
10
+ 50% { -moz-transform: scale(1.1); }
11
+ 100% { -moz-transform: scale(1); }
12
+ }
13
+ @-o-keyframes pulse {
14
+ 0% { -o-transform: scale(1); }
15
+ 50% { -o-transform: scale(1.1); }
16
+ 100% { -o-transform: scale(1); }
17
+ }
18
+ @keyframes pulse {
19
+ 0% { transform: scale(1); }
20
+ 50% { transform: scale(1.1); }
21
+ 100% { transform: scale(1); }
22
+ }
23
+
24
+ .pulse {
25
+ -webkit-animation-name: pulse;
26
+ -moz-animation-name: pulse;
27
+ -o-animation-name: pulse;
28
+ animation-name: pulse;
29
+ }
@@ -0,0 +1,28 @@
1
+ /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
2
+
3
+ @-webkit-keyframes rollIn {
4
+ 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); }
5
+ 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }
6
+ }
7
+
8
+ @-moz-keyframes rollIn {
9
+ 0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); }
10
+ 100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); }
11
+ }
12
+
13
+ @-o-keyframes rollIn {
14
+ 0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); }
15
+ 100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); }
16
+ }
17
+
18
+ @keyframes rollIn {
19
+ 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
20
+ 100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
21
+ }
22
+
23
+ .rollIn {
24
+ -webkit-animation-name: rollIn;
25
+ -moz-animation-name: rollIn;
26
+ -o-animation-name: rollIn;
27
+ animation-name: rollIn;
28
+ }
@@ -0,0 +1,56 @@
1
+ /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
2
+
3
+ @-webkit-keyframes rollOut {
4
+ 0% {
5
+ opacity: 1;
6
+ -webkit-transform: translateX(0px) rotate(0deg);
7
+ }
8
+
9
+ 100% {
10
+ opacity: 0;
11
+ -webkit-transform: translateX(100%) rotate(120deg);
12
+ }
13
+ }
14
+
15
+ @-moz-keyframes rollOut {
16
+ 0% {
17
+ opacity: 1;
18
+ -moz-transform: translateX(0px) rotate(0deg);
19
+ }
20
+
21
+ 100% {
22
+ opacity: 0;
23
+ -moz-transform: translateX(100%) rotate(120deg);
24
+ }
25
+ }
26
+
27
+ @-o-keyframes rollOut {
28
+ 0% {
29
+ opacity: 1;
30
+ -o-transform: translateX(0px) rotate(0deg);
31
+ }
32
+
33
+ 100% {
34
+ opacity: 0;
35
+ -o-transform: translateX(100%) rotate(120deg);
36
+ }
37
+ }
38
+
39
+ @keyframes rollOut {
40
+ 0% {
41
+ opacity: 1;
42
+ transform: translateX(0px) rotate(0deg);
43
+ }
44
+
45
+ 100% {
46
+ opacity: 0;
47
+ transform: translateX(100%) rotate(120deg);
48
+ }
49
+ }
50
+
51
+ .rollOut {
52
+ -webkit-animation-name: rollOut;
53
+ -moz-animation-name: rollOut;
54
+ -o-animation-name: rollOut;
55
+ animation-name: rollOut;
56
+ }
@@ -0,0 +1,59 @@
1
+ @-webkit-keyframes rotateIn {
2
+ 0% {
3
+ -webkit-transform-origin: center center;
4
+ -webkit-transform: rotate(-200deg);
5
+ opacity: 0;
6
+ }
7
+
8
+ 100% {
9
+ -webkit-transform-origin: center center;
10
+ -webkit-transform: rotate(0);
11
+ opacity: 1;
12
+ }
13
+ }
14
+ @-moz-keyframes rotateIn {
15
+ 0% {
16
+ -moz-transform-origin: center center;
17
+ -moz-transform: rotate(-200deg);
18
+ opacity: 0;
19
+ }
20
+
21
+ 100% {
22
+ -moz-transform-origin: center center;
23
+ -moz-transform: rotate(0);
24
+ opacity: 1;
25
+ }
26
+ }
27
+ @-o-keyframes rotateIn {
28
+ 0% {
29
+ -o-transform-origin: center center;
30
+ -o-transform: rotate(-200deg);
31
+ opacity: 0;
32
+ }
33
+
34
+ 100% {
35
+ -o-transform-origin: center center;
36
+ -o-transform: rotate(0);
37
+ opacity: 1;
38
+ }
39
+ }
40
+ @keyframes rotateIn {
41
+ 0% {
42
+ transform-origin: center center;
43
+ transform: rotate(-200deg);
44
+ opacity: 0;
45
+ }
46
+
47
+ 100% {
48
+ transform-origin: center center;
49
+ transform: rotate(0);
50
+ opacity: 1;
51
+ }
52
+ }
53
+
54
+ .rotateIn {
55
+ -webkit-animation-name: rotateIn;
56
+ -moz-animation-name: rotateIn;
57
+ -o-animation-name: rotateIn;
58
+ animation-name: rotateIn;
59
+ }
@@ -0,0 +1,62 @@
1
+ @-webkit-keyframes rotateInDownLeft {
2
+ 0% {
3
+ -webkit-transform-origin: left bottom;
4
+ -webkit-transform: rotate(-90deg);
5
+ opacity: 0;
6
+ }
7
+
8
+ 100% {
9
+ -webkit-transform-origin: left bottom;
10
+ -webkit-transform: rotate(0);
11
+ opacity: 1;
12
+ }
13
+ }
14
+
15
+ @-moz-keyframes rotateInDownLeft {
16
+ 0% {
17
+ -moz-transform-origin: left bottom;
18
+ -moz-transform: rotate(-90deg);
19
+ opacity: 0;
20
+ }
21
+
22
+ 100% {
23
+ -moz-transform-origin: left bottom;
24
+ -moz-transform: rotate(0);
25
+ opacity: 1;
26
+ }
27
+ }
28
+
29
+ @-o-keyframes rotateInDownLeft {
30
+ 0% {
31
+ -o-transform-origin: left bottom;
32
+ -o-transform: rotate(-90deg);
33
+ opacity: 0;
34
+ }
35
+
36
+ 100% {
37
+ -o-transform-origin: left bottom;
38
+ -o-transform: rotate(0);
39
+ opacity: 1;
40
+ }
41
+ }
42
+
43
+ @keyframes rotateInDownLeft {
44
+ 0% {
45
+ transform-origin: left bottom;
46
+ transform: rotate(-90deg);
47
+ opacity: 0;
48
+ }
49
+
50
+ 100% {
51
+ transform-origin: left bottom;
52
+ transform: rotate(0);
53
+ opacity: 1;
54
+ }
55
+ }
56
+
57
+ .rotateInDownLeft {
58
+ -webkit-animation-name: rotateInDownLeft;
59
+ -moz-animation-name: rotateInDownLeft;
60
+ -o-animation-name: rotateInDownLeft;
61
+ animation-name: rotateInDownLeft;
62
+ }
@@ -0,0 +1,62 @@
1
+ @-webkit-keyframes rotateInDownRight {
2
+ 0% {
3
+ -webkit-transform-origin: right bottom;
4
+ -webkit-transform: rotate(90deg);
5
+ opacity: 0;
6
+ }
7
+
8
+ 100% {
9
+ -webkit-transform-origin: right bottom;
10
+ -webkit-transform: rotate(0);
11
+ opacity: 1;
12
+ }
13
+ }
14
+
15
+ @-moz-keyframes rotateInDownRight {
16
+ 0% {
17
+ -moz-transform-origin: right bottom;
18
+ -moz-transform: rotate(90deg);
19
+ opacity: 0;
20
+ }
21
+
22
+ 100% {
23
+ -moz-transform-origin: right bottom;
24
+ -moz-transform: rotate(0);
25
+ opacity: 1;
26
+ }
27
+ }
28
+
29
+ @-o-keyframes rotateInDownRight {
30
+ 0% {
31
+ -o-transform-origin: right bottom;
32
+ -o-transform: rotate(90deg);
33
+ opacity: 0;
34
+ }
35
+
36
+ 100% {
37
+ -o-transform-origin: right bottom;
38
+ -o-transform: rotate(0);
39
+ opacity: 1;
40
+ }
41
+ }
42
+
43
+ @keyframes rotateInDownRight {
44
+ 0% {
45
+ transform-origin: right bottom;
46
+ transform: rotate(90deg);
47
+ opacity: 0;
48
+ }
49
+
50
+ 100% {
51
+ transform-origin: right bottom;
52
+ transform: rotate(0);
53
+ opacity: 1;
54
+ }
55
+ }
56
+
57
+ .rotateInDownRight {
58
+ -webkit-animation-name: rotateInDownRight;
59
+ -moz-animation-name: rotateInDownRight;
60
+ -o-animation-name: rotateInDownRight;
61
+ animation-name: rotateInDownRight;
62
+ }
@@ -0,0 +1,62 @@
1
+ @-webkit-keyframes rotateInUpLeft {
2
+ 0% {
3
+ -webkit-transform-origin: left bottom;
4
+ -webkit-transform: rotate(90deg);
5
+ opacity: 0;
6
+ }
7
+
8
+ 100% {
9
+ -webkit-transform-origin: left bottom;
10
+ -webkit-transform: rotate(0);
11
+ opacity: 1;
12
+ }
13
+ }
14
+
15
+ @-moz-keyframes rotateInUpLeft {
16
+ 0% {
17
+ -moz-transform-origin: left bottom;
18
+ -moz-transform: rotate(90deg);
19
+ opacity: 0;
20
+ }
21
+
22
+ 100% {
23
+ -moz-transform-origin: left bottom;
24
+ -moz-transform: rotate(0);
25
+ opacity: 1;
26
+ }
27
+ }
28
+
29
+ @-o-keyframes rotateInUpLeft {
30
+ 0% {
31
+ -o-transform-origin: left bottom;
32
+ -o-transform: rotate(90deg);
33
+ opacity: 0;
34
+ }
35
+
36
+ 100% {
37
+ -o-transform-origin: left bottom;
38
+ -o-transform: rotate(0);
39
+ opacity: 1;
40
+ }
41
+ }
42
+
43
+ @keyframes rotateInUpLeft {
44
+ 0% {
45
+ transform-origin: left bottom;
46
+ transform: rotate(90deg);
47
+ opacity: 0;
48
+ }
49
+
50
+ 100% {
51
+ transform-origin: left bottom;
52
+ transform: rotate(0);
53
+ opacity: 1;
54
+ }
55
+ }
56
+
57
+ .rotateInUpLeft {
58
+ -webkit-animation-name: rotateInUpLeft;
59
+ -moz-animation-name: rotateInUpLeft;
60
+ -o-animation-name: rotateInUpLeft;
61
+ animation-name: rotateInUpLeft;
62
+ }