animate 0.1.alpha.0

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 (33) hide show
  1. data/README.md +191 -0
  2. data/lib/animate.rb +9 -0
  3. data/stylesheets/_animate.scss +40 -0
  4. data/stylesheets/_helpers.scss +37 -0
  5. data/stylesheets/animate/_attention.scss +32 -0
  6. data/stylesheets/animate/_bounce.scss +63 -0
  7. data/stylesheets/animate/_fade.scss +52 -0
  8. data/stylesheets/animate/_flip.scss +83 -0
  9. data/stylesheets/animate/_lightSpeed.scss +16 -0
  10. data/stylesheets/animate/_roll.scss +16 -0
  11. data/stylesheets/animate/_rotate.scss +37 -0
  12. data/stylesheets/animate/_special.scss +13 -0
  13. data/stylesheets/animate/attention/_flash.scss +24 -0
  14. data/stylesheets/animate/attention/_pulse.scss +18 -0
  15. data/stylesheets/animate/attention/_shake.scss +43 -0
  16. data/stylesheets/animate/attention/_swing.scss +29 -0
  17. data/stylesheets/animate/attention/_tada.scss +41 -0
  18. data/stylesheets/animate/attention/_wiggle.scss +42 -0
  19. data/stylesheets/animate/attention/_wobble.scss +30 -0
  20. data/stylesheets/animate/bounce/_bounceIn.scss +119 -0
  21. data/stylesheets/animate/bounce/_bounceOut.scss +107 -0
  22. data/stylesheets/animate/fade/_fadeIn.scss +159 -0
  23. data/stylesheets/animate/fade/_fadeOut.scss +159 -0
  24. data/stylesheets/animate/flip/_flipIn.scss +58 -0
  25. data/stylesheets/animate/flip/_flipOut.scss +46 -0
  26. data/stylesheets/animate/lightSpeed/_lightSpeedIn.scss +25 -0
  27. data/stylesheets/animate/lightSpeed/_lightSpeedOut.scss +17 -0
  28. data/stylesheets/animate/roll/_rollIn.scss +17 -0
  29. data/stylesheets/animate/roll/_rollOut.scss +16 -0
  30. data/stylesheets/animate/rotate/_rotateIn.scss +159 -0
  31. data/stylesheets/animate/rotate/_rotateOut.scss +159 -0
  32. data/stylesheets/animate/special/_hinge.scss +38 -0
  33. metadata +134 -0
@@ -0,0 +1,17 @@
1
+ // ---------------------------------------------------------------------------
2
+ // lightSpeedOut
3
+
4
+ @mixin animate-lightSpeedOut($class: $default-animation-class-mode) {
5
+ $name: lightSpeedOut;
6
+ @include keyframes($name) {
7
+ 0% {
8
+ @include transform(translateX(0%) skewX(0deg));
9
+ @include opacity(1);
10
+ }
11
+ 100% {
12
+ @include transform(translateX(100%) skewX(-30deg));
13
+ @include opacity(0);
14
+ }
15
+ }
16
+ @include animation-class($name, $class) {}
17
+ }
@@ -0,0 +1,17 @@
1
+ // ---------------------------------------------------------------------------
2
+ // rollIn
3
+
4
+ @mixin animate-rollIn($class: $default-animation-class-mode) {
5
+ $name: rollIn;
6
+ @include keyframes($name) {
7
+ 0% {
8
+ @include opacity(0);
9
+ @include transform(translateX(-100%) rotate(-120deg));
10
+ }
11
+ 100% {
12
+ @include opacity(1);
13
+ @include transform(translateX(0px) rotate(0deg));
14
+ }
15
+ }
16
+ @include animation-class($name, $class) {}
17
+ }
@@ -0,0 +1,16 @@
1
+ // ---------------------------------------------------------------------------
2
+ // rollOut
3
+
4
+ @mixin animate-rollOut($class: $default-animation-class-mode) {
5
+ $name: rollOut;
6
+ @include keyframes($name) {
7
+ 0% {
8
+ @include opacity(1);
9
+ @include transform(translateX(0px) rotate(0deg)); }
10
+ 100% {
11
+ @include opacity(0);
12
+ @include transform(translateX(-100%) rotate(-120deg));
13
+ }
14
+ }
15
+ @include animation-class($name, $class) {}
16
+ }
@@ -0,0 +1,159 @@
1
+ // ---------------------------------------------------------------------------
2
+ // rotateIn [ only | up | down | left | right |
3
+ // downLeft | downRight | upLeft | upRight | all ]
4
+
5
+ @mixin animate-rotateIn($sub: all, $class: $default-animation-class-mode) {
6
+ $sub : compact($sub);
7
+ $only : yepnope($sub, all only);
8
+ $downLeft : yepnope($sub, all down left downLeft);
9
+ $downRight : yepnope($sub, all down right downRight);
10
+ $upLeft : yepnope($sub, all up left upLeft);
11
+ $upRight : yepnope($sub, all up right upRight);
12
+
13
+ @if $downLeft { @include animate-rotateInDownLeft ($class); }
14
+ @if $downRight { @include animate-rotateInDownRight ($class); }
15
+ @if $upLeft { @include animate-rotateInUpLeft ($class); }
16
+ @if $upRight { @include animate-rotateInUpRight ($class); }
17
+
18
+ $name: rotateIn;
19
+ @if $only {
20
+ @include keyframes($name) {
21
+ 0% {
22
+ @include transform-origin(center, center);
23
+ @include rotate(-200deg);
24
+ opacity: 0;
25
+ }
26
+ 100% {
27
+ @include transform-origin(center, center);
28
+ @include rotate(0);
29
+ opacity: 1;
30
+ }
31
+ }
32
+ @include animation-class($name, $class) {}
33
+ }
34
+ }
35
+
36
+ // ---------------------------------------------------------------------------
37
+ // rotateInUp [ left | right | all ]
38
+
39
+ @mixin animate-rotateInUp($sub: all, $class: $default-animation-class-mode) {
40
+ $sub : compact($sub);
41
+ $left : yepnope($sub, all left);
42
+ $right : yepnope($sub, all right);
43
+ @if $left { @include animate-rotateInUpLeft ($class); }
44
+ @if $right { @include animate-rotateInUpRight ($class); }
45
+ }
46
+
47
+ // ---------------------------------------------------------------------------
48
+ // rotateInDown [ left | right | all ]
49
+
50
+ @mixin animate-rotateInDown($sub: all, $class: $default-animation-class-mode) {
51
+ $sub : compact($sub);
52
+ $left : yepnope($sub, all left);
53
+ $right : yepnope($sub, all right);
54
+ @if $left { @include animate-rotateInDownLeft ($class); }
55
+ @if $right { @include animate-rotateInDownRight ($class); }
56
+ }
57
+
58
+
59
+ // ---------------------------------------------------------------------------
60
+ // rotateInLeft [ up | down | all ]
61
+
62
+ @mixin animate-rotateInLeft($sub: all, $class: $default-animation-class-mode) {
63
+ $sub : compact($sub);
64
+ $up : yepnope($sub, all up);
65
+ $down : yepnope($sub, all down);
66
+ @if $up { @include animate-rotateInUpLeft ($class); }
67
+ @if $down { @include animate-rotateInDownLeft ($class); }
68
+ }
69
+
70
+ // ---------------------------------------------------------------------------
71
+ // rotateInRight [ up | down | all ]
72
+
73
+ @mixin animate-rotateInRight($sub: all, $class: $default-animation-class-mode) {
74
+ $sub : compact($sub);
75
+ $up : yepnope($sub, all up);
76
+ $down : yepnope($sub, all down);
77
+ @if $up { @include animate-rotateInUpRight ($class); }
78
+ @if $down { @include animate-rotateInDownRight ($class); }
79
+ }
80
+
81
+ // ---------------------------------------------------------------------------
82
+ // rotateInDownLeft
83
+
84
+ @mixin animate-rotateInDownLeft($class: $default-animation-class-mode) {
85
+ $name: rotateInDownLeft;
86
+ @include keyframes($name) {
87
+ 0% {
88
+ @include transform-origin(left, bottom);
89
+ @include rotate(-90deg);
90
+ opacity: 0;
91
+ }
92
+ 100% {
93
+ @include transform-origin(left, bottom);
94
+ @include rotate(0);
95
+ opacity: 1;
96
+ }
97
+ }
98
+ @include animation-class($name, $class) {}
99
+ }
100
+
101
+ // ---------------------------------------------------------------------------
102
+ // rotateInUpLeft
103
+
104
+ @mixin animate-rotateInUpLeft($class: $default-animation-class-mode) {
105
+ $name: rotateInUpLeft;
106
+ @include keyframes($name) {
107
+ 0% {
108
+ @include transform-origin(left, bottom);
109
+ @include rotate(90deg);
110
+ opacity: 0;
111
+ }
112
+ 100% {
113
+ @include transform-origin(left, bottom);
114
+ @include rotate(0);
115
+ opacity: 1;
116
+ }
117
+ }
118
+ @include animation-class($name, $class) {}
119
+ }
120
+
121
+ // ---------------------------------------------------------------------------
122
+ // rotateInUpRight
123
+
124
+ @mixin animate-rotateInUpRight($class: $default-animation-class-mode) {
125
+ $name: rotateInUpRight;
126
+ @include keyframes($name) {
127
+ 0% {
128
+ @include transform-origin(right, bottom);
129
+ @include rotate(-90deg);
130
+ opacity: 0;
131
+ }
132
+ 100% {
133
+ @include transform-origin(right, bottom);
134
+ @include rotate(0);
135
+ opacity: 1;
136
+ }
137
+ }
138
+ @include animation-class($name, $class) {}
139
+ }
140
+
141
+ // ---------------------------------------------------------------------------
142
+ // rotateInDownRight
143
+
144
+ @mixin animate-rotateInDownRight($class: $default-animation-class-mode) {
145
+ $name: rotateInDownRight;
146
+ @include keyframes($name) {
147
+ 0% {
148
+ @include transform-origin(right, bottom);
149
+ @include rotate(90deg);
150
+ opacity: 0;
151
+ }
152
+ 100% {
153
+ @include transform-origin(right, bottom);
154
+ @include rotate(0);
155
+ opacity: 1;
156
+ }
157
+ }
158
+ @include animation-class($name, $class) {}
159
+ }
@@ -0,0 +1,159 @@
1
+ // ---------------------------------------------------------------------------
2
+ // rotateOut [ only | up | down | left | right |
3
+ // downLeft | downRight | upLeft | upRight | all ]
4
+
5
+ @mixin animate-rotateOut($sub: all, $class: $default-animation-class-mode) {
6
+ $sub : compact($sub);
7
+ $only : yepnope($sub, all only);
8
+ $downLeft : yepnope($sub, all down left downLeft);
9
+ $downRight : yepnope($sub, all down right downRight);
10
+ $upLeft : yepnope($sub, all up left upLeft);
11
+ $upRight : yepnope($sub, all up right upRight);
12
+
13
+ @if $downLeft { @include animate-rotateOutDownLeft ($class); }
14
+ @if $downRight { @include animate-rotateOutDownRight ($class); }
15
+ @if $upLeft { @include animate-rotateOutUpLeft ($class); }
16
+ @if $upRight { @include animate-rotateOutUpRight ($class); }
17
+
18
+ $name: rotateOut;
19
+ @if $only {
20
+ @include keyframes($name) {
21
+ 0% {
22
+ @include transform-origin(center, center);
23
+ @include rotate(0);
24
+ opacity: 1;
25
+ }
26
+ 100% {
27
+ @include transform-origin(center, center);
28
+ @include rotate(200deg);
29
+ opacity: 0;
30
+ }
31
+ }
32
+ @include animation-class($name, $class) {}
33
+ }
34
+ }
35
+
36
+ // ---------------------------------------------------------------------------
37
+ // rotateOutUp [ left | right | all ]
38
+
39
+ @mixin animate-rotateOutUp($sub: all, $class: $default-animation-class-mode) {
40
+ $sub : compact($sub);
41
+ $left : yepnope($sub, all left);
42
+ $right : yepnope($sub, all right);
43
+ @if $left { @include animate-rotateOutUpLeft ($class); }
44
+ @if $right { @include animate-rotateOutUpRight ($class); }
45
+ }
46
+
47
+ // ---------------------------------------------------------------------------
48
+ // rotateOutDown [ left | right | all ]
49
+
50
+ @mixin animate-rotateOutDown($sub: all, $class: $default-animation-class-mode) {
51
+ $sub : compact($sub);
52
+ $left : yepnope($sub, all left);
53
+ $right : yepnope($sub, all right);
54
+ @if $left { @include animate-rotateOutDownLeft ($class); }
55
+ @if $right { @include animate-rotateOutDownRight ($class); }
56
+ }
57
+
58
+
59
+ // ---------------------------------------------------------------------------
60
+ // rotateOutLeft [ up | down | all ]
61
+
62
+ @mixin animate-rotateOutLeft($sub: all, $class: $default-animation-class-mode) {
63
+ $sub : compact($sub);
64
+ $up : yepnope($sub, all up);
65
+ $down : yepnope($sub, all down);
66
+ @if $up { @include animate-rotateOutUpLeft ($class); }
67
+ @if $down { @include animate-rotateOutDownLeft ($class); }
68
+ }
69
+
70
+ // ---------------------------------------------------------------------------
71
+ // rotateOutRight [ up | down | all ]
72
+
73
+ @mixin animate-rotateOutRight($sub: all, $class: $default-animation-class-mode) {
74
+ $sub : compact($sub);
75
+ $up : yepnope($sub, all up);
76
+ $down : yepnope($sub, all down);
77
+ @if $up { @include animate-rotateOutUpRight ($class); }
78
+ @if $down { @include animate-rotateOutDownRight ($class); }
79
+ }
80
+
81
+ // ---------------------------------------------------------------------------
82
+ // rotateOutDownLeft
83
+
84
+ @mixin animate-rotateOutDownLeft($class: $default-animation-class-mode) {
85
+ $name: rotateOutDownLeft;
86
+ @include keyframes($name) {
87
+ 0% {
88
+ @include transform-origin(left, bottom);
89
+ @include rotate(0);
90
+ opacity: 1;
91
+ }
92
+ 100% {
93
+ @include transform-origin(left, bottom);
94
+ @include rotate(90deg);
95
+ opacity: 0;
96
+ }
97
+ }
98
+ @include animation-class($name, $class) {}
99
+ }
100
+
101
+ // ---------------------------------------------------------------------------
102
+ // rotateOutUpLeft
103
+
104
+ @mixin animate-rotateOutUpLeft($class: $default-animation-class-mode) {
105
+ $name: rotateOutUpLeft;
106
+ @include keyframes($name) {
107
+ 0% {
108
+ @include transform-origin(left, bottom);
109
+ @include rotate(0);
110
+ opacity: 1;
111
+ }
112
+ 100% {
113
+ @include transform-origin(left, bottom);
114
+ @include rotate(-90deg);
115
+ opacity: 0;
116
+ }
117
+ }
118
+ @include animation-class($name, $class) {}
119
+ }
120
+
121
+ // ---------------------------------------------------------------------------
122
+ // rotateOutDownRight
123
+
124
+ @mixin animate-rotateOutDownRight($class: $default-animation-class-mode) {
125
+ $name: rotateOutDownRight;
126
+ @include keyframes($name) {
127
+ 0% {
128
+ @include transform-origin(right, bottom);
129
+ @include rotate(0);
130
+ opacity: 1;
131
+ }
132
+ 100% {
133
+ @include transform-origin(right, bottom);
134
+ @include rotate(-90deg);
135
+ opacity: 0;
136
+ }
137
+ }
138
+ @include animation-class($name, $class) {}
139
+ }
140
+
141
+ // ---------------------------------------------------------------------------
142
+ // rotateOutUpRight
143
+
144
+ @mixin animate-rotateOutUpRight($class: $default-animation-class-mode) {
145
+ $name: rotateOutUpRight;
146
+ @include keyframes($name) {
147
+ 0% {
148
+ @include transform-origin(right, bottom);
149
+ @include rotate(0);
150
+ opacity: 1;
151
+ }
152
+ 100% {
153
+ @include transform-origin(right, bottom);
154
+ @include rotate(90deg);
155
+ opacity: 0;
156
+ }
157
+ }
158
+ @include animation-class($name, $class) {}
159
+ }
@@ -0,0 +1,38 @@
1
+ // ---------------------------------------------------------------------------
2
+ // hinge
3
+
4
+ @mixin animate-hinge($class: $default-animation-class-mode) {
5
+ $name: hinge;
6
+ @include keyframes($name) {
7
+ 0% {
8
+ @include rotate(0);
9
+ @include transform-origin(top, left);
10
+ @include animation-timing-function(ease-in-out);
11
+ }
12
+ 20%, 60% {
13
+ @include rotate(80deg);
14
+ @include transform-origin(top, left);
15
+ @include animation-timing-function(ease-in-out);
16
+ }
17
+ 40% {
18
+ @include rotate(60deg);
19
+ @include transform-origin(top, left);
20
+ @include animation-timing-function(ease-in-out);
21
+ }
22
+ 80% {
23
+ @include transform(rotate(60deg) translateY(0));
24
+ @include opacity(1);
25
+ @include transform-origin(top, left);
26
+ @include animation-timing-function(ease-in-out);
27
+ }
28
+ 100% {
29
+ @include translateY(700px);
30
+ @include opacity(0);
31
+ }
32
+ }
33
+
34
+ @include animation-class($name, $class) {
35
+ $selector: if($class == 'silent', '%animated', '.animated');
36
+ &#{$selector} { @include animation(2s ease both); }
37
+ }
38
+ }
metadata ADDED
@@ -0,0 +1,134 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: animate
3
+ version: !ruby/object:Gem::Version
4
+ hash: 3005943807
5
+ prerelease: 4
6
+ segments:
7
+ - 0
8
+ - 1
9
+ - alpha
10
+ - 0
11
+ version: 0.1.alpha.0
12
+ platform: ruby
13
+ authors:
14
+ - Eric Meyer
15
+ - Maxime Fabre
16
+ autorequire:
17
+ bindir: bin
18
+ cert_chain: []
19
+
20
+ date: 2012-05-29 00:00:00 Z
21
+ dependencies:
22
+ - !ruby/object:Gem::Dependency
23
+ name: sass
24
+ prerelease: false
25
+ requirement: &id001 !ruby/object:Gem::Requirement
26
+ none: false
27
+ requirements:
28
+ - - ">="
29
+ - !ruby/object:Gem::Version
30
+ hash: 3005943801
31
+ segments:
32
+ - 3
33
+ - 2
34
+ - 0
35
+ - alpha
36
+ - 95
37
+ version: 3.2.0.alpha.95
38
+ type: :runtime
39
+ version_requirements: *id001
40
+ - !ruby/object:Gem::Dependency
41
+ name: compass
42
+ prerelease: false
43
+ requirement: &id002 !ruby/object:Gem::Requirement
44
+ none: false
45
+ requirements:
46
+ - - ">="
47
+ - !ruby/object:Gem::Version
48
+ hash: 3005943711
49
+ segments:
50
+ - 0
51
+ - 13
52
+ - alpha
53
+ - 0
54
+ version: 0.13.alpha.0
55
+ type: :runtime
56
+ version_requirements: *id002
57
+ description: Compass port of Animate.css by Dan Eden, allows you to choose only the animations you need, with or without associated classes.
58
+ email: eric@oddbird.net
59
+ executables: []
60
+
61
+ extensions: []
62
+
63
+ extra_rdoc_files: []
64
+
65
+ files:
66
+ - README.md
67
+ - lib/animate.rb
68
+ - stylesheets/_animate.scss
69
+ - stylesheets/_helpers.scss
70
+ - stylesheets/animate/_attention.scss
71
+ - stylesheets/animate/_bounce.scss
72
+ - stylesheets/animate/_fade.scss
73
+ - stylesheets/animate/_flip.scss
74
+ - stylesheets/animate/_lightSpeed.scss
75
+ - stylesheets/animate/_roll.scss
76
+ - stylesheets/animate/_rotate.scss
77
+ - stylesheets/animate/_special.scss
78
+ - stylesheets/animate/attention/_flash.scss
79
+ - stylesheets/animate/attention/_pulse.scss
80
+ - stylesheets/animate/attention/_shake.scss
81
+ - stylesheets/animate/attention/_swing.scss
82
+ - stylesheets/animate/attention/_tada.scss
83
+ - stylesheets/animate/attention/_wiggle.scss
84
+ - stylesheets/animate/attention/_wobble.scss
85
+ - stylesheets/animate/bounce/_bounceIn.scss
86
+ - stylesheets/animate/bounce/_bounceOut.scss
87
+ - stylesheets/animate/fade/_fadeIn.scss
88
+ - stylesheets/animate/fade/_fadeOut.scss
89
+ - stylesheets/animate/flip/_flipIn.scss
90
+ - stylesheets/animate/flip/_flipOut.scss
91
+ - stylesheets/animate/lightSpeed/_lightSpeedIn.scss
92
+ - stylesheets/animate/lightSpeed/_lightSpeedOut.scss
93
+ - stylesheets/animate/roll/_rollIn.scss
94
+ - stylesheets/animate/roll/_rollOut.scss
95
+ - stylesheets/animate/rotate/_rotateIn.scss
96
+ - stylesheets/animate/rotate/_rotateOut.scss
97
+ - stylesheets/animate/special/_hinge.scss
98
+ homepage: https://github.com/ericam/compass-animate
99
+ licenses: []
100
+
101
+ post_install_message:
102
+ rdoc_options: []
103
+
104
+ require_paths:
105
+ - lib
106
+ required_ruby_version: !ruby/object:Gem::Requirement
107
+ none: false
108
+ requirements:
109
+ - - ">="
110
+ - !ruby/object:Gem::Version
111
+ hash: 3
112
+ segments:
113
+ - 0
114
+ version: "0"
115
+ required_rubygems_version: !ruby/object:Gem::Requirement
116
+ none: false
117
+ requirements:
118
+ - - ">"
119
+ - !ruby/object:Gem::Version
120
+ hash: 25
121
+ segments:
122
+ - 1
123
+ - 3
124
+ - 1
125
+ version: 1.3.1
126
+ requirements: []
127
+
128
+ rubyforge_project:
129
+ rubygems_version: 1.8.15
130
+ signing_key:
131
+ specification_version: 3
132
+ summary: Compass port of Animate.css by Dan Eden.
133
+ test_files: []
134
+