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
@@ -0,0 +1,48 @@
1
+ @-webkit-keyframes tada {
2
+ 0% {-webkit-transform: scale(1);}
3
+ 10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
4
+ 30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
5
+ 40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
6
+ 100% {-webkit-transform: scale(1) rotate(0);}
7
+ }
8
+
9
+ @-moz-keyframes tada {
10
+ 0% {-moz-transform: scale(1);}
11
+ 10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);}
12
+ 30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);}
13
+ 40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);}
14
+ 100% {-moz-transform: scale(1) rotate(0);}
15
+ }
16
+
17
+ @-ms-keyframes tada {
18
+ 0% {-ms-transform: scale(1);}
19
+ 10%, 20% {-ms-transform: scale(0.9) rotate(-3deg);}
20
+ 30%, 50%, 70%, 90% {-ms-transform: scale(1.1) rotate(3deg);}
21
+ 40%, 60%, 80% {-ms-transform: scale(1.1) rotate(-3deg);}
22
+ 100% {-ms-transform: scale(1) rotate(0);}
23
+ }
24
+
25
+ @-o-keyframes tada {
26
+ 0% {-o-transform: scale(1);}
27
+ 10%, 20% {-o-transform: scale(0.9) rotate(-3deg);}
28
+ 30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);}
29
+ 40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);}
30
+ 100% {-o-transform: scale(1) rotate(0);}
31
+ }
32
+
33
+ @keyframes tada {
34
+ 0% {transform: scale(1);}
35
+ 10%, 20% {transform: scale(0.9) rotate(-3deg);}
36
+ 30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
37
+ 40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
38
+ 100% {transform: scale(1) rotate(0);}
39
+ }
40
+
41
+ @mixin tada($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
42
+ @include animation-name(tada);
43
+ @include duration($duration);
44
+ @include delay($delay);
45
+ @include function($function);
46
+ @include fill-mode($fill);
47
+ @include visibility($visibility);
48
+ }
@@ -0,0 +1,78 @@
1
+ @-webkit-keyframes wiggle {
2
+ 0% { -webkit-transform: skewX(9deg); }
3
+ 10% { -webkit-transform: skewX(-8deg); }
4
+ 20% { -webkit-transform: skewX(7deg); }
5
+ 30% { -webkit-transform: skewX(-6deg); }
6
+ 40% { -webkit-transform: skewX(5deg); }
7
+ 50% { -webkit-transform: skewX(-4deg); }
8
+ 60% { -webkit-transform: skewX(3deg); }
9
+ 70% { -webkit-transform: skewX(-2deg); }
10
+ 80% { -webkit-transform: skewX(1deg); }
11
+ 90% { -webkit-transform: skewX(0deg); }
12
+ 100% { -webkit-transform: skewX(0deg); }
13
+ }
14
+
15
+ @-moz-keyframes wiggle {
16
+ 0% { -moz-transform: skewX(9deg); }
17
+ 10% { -moz-transform: skewX(-8deg); }
18
+ 20% { -moz-transform: skewX(7deg); }
19
+ 30% { -moz-transform: skewX(-6deg); }
20
+ 40% { -moz-transform: skewX(5deg); }
21
+ 50% { -moz-transform: skewX(-4deg); }
22
+ 60% { -moz-transform: skewX(3deg); }
23
+ 70% { -moz-transform: skewX(-2deg); }
24
+ 80% { -moz-transform: skewX(1deg); }
25
+ 90% { -moz-transform: skewX(0deg); }
26
+ 100% { -moz-transform: skewX(0deg); }
27
+ }
28
+
29
+ @-ms-keyframes wiggle {
30
+ 0% { -ms-transform: skewX(9deg); }
31
+ 10% { -ms-transform: skewX(-8deg); }
32
+ 20% { -ms-transform: skewX(7deg); }
33
+ 30% { -ms-transform: skewX(-6deg); }
34
+ 40% { -ms-transform: skewX(5deg); }
35
+ 50% { -ms-transform: skewX(-4deg); }
36
+ 60% { -ms-transform: skewX(3deg); }
37
+ 70% { -ms-transform: skewX(-2deg); }
38
+ 80% { -ms-transform: skewX(1deg); }
39
+ 90% { -ms-transform: skewX(0deg); }
40
+ 100% { -ms-transform: skewX(0deg); }
41
+ }
42
+
43
+ @-o-keyframes wiggle {
44
+ 0% { -o-transform: skewX(9deg); }
45
+ 10% { -o-transform: skewX(-8deg); }
46
+ 20% { -o-transform: skewX(7deg); }
47
+ 30% { -o-transform: skewX(-6deg); }
48
+ 40% { -o-transform: skewX(5deg); }
49
+ 50% { -o-transform: skewX(-4deg); }
50
+ 60% { -o-transform: skewX(3deg); }
51
+ 70% { -o-transform: skewX(-2deg); }
52
+ 80% { -o-transform: skewX(1deg); }
53
+ 90% { -o-transform: skewX(0deg); }
54
+ 100% { -o-transform: skewX(0deg); }
55
+ }
56
+
57
+ @keyframes wiggle {
58
+ 0% { transform: skewX(9deg); }
59
+ 10% { transform: skewX(-8deg); }
60
+ 20% { transform: skewX(7deg); }
61
+ 30% { transform: skewX(-6deg); }
62
+ 40% { transform: skewX(5deg); }
63
+ 50% { transform: skewX(-4deg); }
64
+ 60% { transform: skewX(3deg); }
65
+ 70% { transform: skewX(-2deg); }
66
+ 80% { transform: skewX(1deg); }
67
+ 90% { transform: skewX(0deg); }
68
+ 100% { transform: skewX(0deg); }
69
+ }
70
+
71
+ @mixin wiggle($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
72
+ @include animation-name(wiggle);
73
+ @include duration($duration);
74
+ @include delay($delay);
75
+ @include function($function);
76
+ @include fill-mode($fill);
77
+ @include visibility($visibility);
78
+ }
@@ -0,0 +1,60 @@
1
+ // originally authored by Nick Pettit - https://github.com/nickpettit/glide
2
+
3
+ @-webkit-keyframes wobble {
4
+ 0% {-webkit-transform: translateX(0%);}
5
+ 15% {-webkit-transform: translateX(-25%) rotate(-5deg);}
6
+ 30% {-webkit-transform: translateX(20%) rotate(3deg);}
7
+ 45% {-webkit-transform: translateX(-15%) rotate(-3deg);}
8
+ 60% {-webkit-transform: translateX(10%) rotate(2deg);}
9
+ 75% {-webkit-transform: translateX(-5%) rotate(-1deg);}
10
+ 100% {-webkit-transform: translateX(0%);}
11
+ }
12
+
13
+ @-moz-keyframes wobble {
14
+ 0% {-moz-transform: translateX(0%);}
15
+ 15% {-moz-transform: translateX(-25%) rotate(-5deg);}
16
+ 30% {-moz-transform: translateX(20%) rotate(3deg);}
17
+ 45% {-moz-transform: translateX(-15%) rotate(-3deg);}
18
+ 60% {-moz-transform: translateX(10%) rotate(2deg);}
19
+ 75% {-moz-transform: translateX(-5%) rotate(-1deg);}
20
+ 100% {-moz-transform: translateX(0%);}
21
+ }
22
+
23
+ @-ms-keyframes wobble {
24
+ 0% {-ms-transform: translateX(0%);}
25
+ 15% {-ms-transform: translateX(-25%) rotate(-5deg);}
26
+ 30% {-ms-transform: translateX(20%) rotate(3deg);}
27
+ 45% {-ms-transform: translateX(-15%) rotate(-3deg);}
28
+ 60% {-ms-transform: translateX(10%) rotate(2deg);}
29
+ 75% {-ms-transform: translateX(-5%) rotate(-1deg);}
30
+ 100% {-ms-transform: translateX(0%);}
31
+ }
32
+
33
+ @-o-keyframes wobble {
34
+ 0% {-o-transform: translateX(0%);}
35
+ 15% {-o-transform: translateX(-25%) rotate(-5deg);}
36
+ 30% {-o-transform: translateX(20%) rotate(3deg);}
37
+ 45% {-o-transform: translateX(-15%) rotate(-3deg);}
38
+ 60% {-o-transform: translateX(10%) rotate(2deg);}
39
+ 75% {-o-transform: translateX(-5%) rotate(-1deg);}
40
+ 100% {-o-transform: translateX(0%);}
41
+ }
42
+
43
+ @keyframes wobble {
44
+ 0% {transform: translateX(0%);}
45
+ 15% {transform: translateX(-25%) rotate(-5deg);}
46
+ 30% {transform: translateX(20%) rotate(3deg);}
47
+ 45% {transform: translateX(-15%) rotate(-3deg);}
48
+ 60% {transform: translateX(10%) rotate(2deg);}
49
+ 75% {transform: translateX(-5%) rotate(-1deg);}
50
+ 100% {transform: translateX(0%);}
51
+ }
52
+
53
+ @mixin wobble($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
54
+ @include animation-name(wobble);
55
+ @include duration($duration);
56
+ @include delay($delay);
57
+ @include function($function);
58
+ @include fill-mode($fill);
59
+ @include visibility($visibility);
60
+ }
metadata ADDED
@@ -0,0 +1,120 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: compass-animate
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.0.1
5
+ prerelease:
6
+ platform: ruby
7
+ authors:
8
+ - Pieter Soudan
9
+ autorequire:
10
+ bindir: bin
11
+ cert_chain: []
12
+ date: 2013-10-16 00:00:00.000000000 Z
13
+ dependencies:
14
+ - !ruby/object:Gem::Dependency
15
+ name: compass
16
+ requirement: !ruby/object:Gem::Requirement
17
+ none: false
18
+ requirements:
19
+ - - ! '>='
20
+ - !ruby/object:Gem::Version
21
+ version: '0.11'
22
+ type: :runtime
23
+ prerelease: false
24
+ version_requirements: !ruby/object:Gem::Requirement
25
+ none: false
26
+ requirements:
27
+ - - ! '>='
28
+ - !ruby/object:Gem::Version
29
+ version: '0.11'
30
+ description: a port of animate.css for compass
31
+ email: pieter.soudan@redandivory.be
32
+ executables: []
33
+ extensions: []
34
+ extra_rdoc_files: []
35
+ files:
36
+ - README.md
37
+ - lib/animate.rb
38
+ - stylesheets/_animate.scss
39
+ - stylesheets/animate/rotateInUpRight.scss
40
+ - stylesheets/animate/fadeInUp.scss
41
+ - stylesheets/animate/properties.scss
42
+ - stylesheets/animate/swing.scss
43
+ - stylesheets/animate/fadeInLeft.scss
44
+ - stylesheets/animate/rotateOutUpRight.scss
45
+ - stylesheets/animate/rollIn.scss
46
+ - stylesheets/animate/fadeOutLeftBig.scss
47
+ - stylesheets/animate/rotateOutUpLeft.scss
48
+ - stylesheets/animate/flipOutX.scss
49
+ - stylesheets/animate/fadeInRightBig.scss
50
+ - stylesheets/animate/fadeOutLeft.scss
51
+ - stylesheets/animate/tada.scss
52
+ - stylesheets/animate/rotateOutDownRight.scss
53
+ - stylesheets/animate/shake.scss
54
+ - stylesheets/animate/rotateInDownLeft.scss
55
+ - stylesheets/animate/bounceOutUp.scss
56
+ - stylesheets/animate/fadeInUpBig.scss
57
+ - stylesheets/animate/bounceOutRight.scss
58
+ - stylesheets/animate/bounceInDown.scss
59
+ - stylesheets/animate/lightSpeedOut.scss
60
+ - stylesheets/animate/fadeOutDownBig.scss
61
+ - stylesheets/animate/bounceOutLeft.scss
62
+ - stylesheets/animate/fadeOutUpBig.scss
63
+ - stylesheets/animate/rotateIn.scss
64
+ - stylesheets/animate/bounceInLeft.scss
65
+ - stylesheets/animate/hinge.scss
66
+ - stylesheets/animate/fadeInLeftBig.scss
67
+ - stylesheets/animate/fadeOutDown.scss
68
+ - stylesheets/animate/rotateInUpLeft.scss
69
+ - stylesheets/animate/fadeOutRight.scss
70
+ - stylesheets/animate/bounceInRight.scss
71
+ - stylesheets/animate/fadeIn.scss
72
+ - stylesheets/animate/flip.scss
73
+ - stylesheets/animate/flash.scss
74
+ - stylesheets/animate/bounceOutDown.scss
75
+ - stylesheets/animate/fadeOut.scss
76
+ - stylesheets/animate/lightSpeedIn.scss
77
+ - stylesheets/animate/wobble.scss
78
+ - stylesheets/animate/fadeInDownBig.scss
79
+ - stylesheets/animate/fadeOutRightBig.scss
80
+ - stylesheets/animate/fadeInRight.scss
81
+ - stylesheets/animate/bounceIn.scss
82
+ - stylesheets/animate/rotateOutDownLeft.scss
83
+ - stylesheets/animate/bounceInUp.scss
84
+ - stylesheets/animate/fadeOutUp.scss
85
+ - stylesheets/animate/bounce.scss
86
+ - stylesheets/animate/flipOutY.scss
87
+ - stylesheets/animate/rotateOut.scss
88
+ - stylesheets/animate/pulse.scss
89
+ - stylesheets/animate/rollOut.scss
90
+ - stylesheets/animate/rotateInDownRight.scss
91
+ - stylesheets/animate/wiggle.scss
92
+ - stylesheets/animate/fadeInDown.scss
93
+ - stylesheets/animate/flipInY.scss
94
+ - stylesheets/animate/flipInX.scss
95
+ - stylesheets/animate/bounceOut.scss
96
+ homepage: http://www.redandivory.be/
97
+ licenses: []
98
+ post_install_message:
99
+ rdoc_options: []
100
+ require_paths:
101
+ - lib
102
+ required_ruby_version: !ruby/object:Gem::Requirement
103
+ none: false
104
+ requirements:
105
+ - - ! '>='
106
+ - !ruby/object:Gem::Version
107
+ version: '0'
108
+ required_rubygems_version: !ruby/object:Gem::Requirement
109
+ none: false
110
+ requirements:
111
+ - - ! '>='
112
+ - !ruby/object:Gem::Version
113
+ version: '0'
114
+ requirements: []
115
+ rubyforge_project:
116
+ rubygems_version: 1.8.23
117
+ signing_key:
118
+ specification_version: 3
119
+ summary: a port of animate.css for compass
120
+ test_files: []