animate 0.1.alpha.0 → 0.1.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.
- data/README.md +20 -12
- data/stylesheets/_animate.scss +10 -10
- data/stylesheets/animate/_bounce.scss +2 -0
- data/stylesheets/animate/_flip.scss +1 -0
- data/stylesheets/animate/attention/_flash.scss +5 -0
- data/stylesheets/animate/attention/_pulse.scss +5 -0
- data/stylesheets/animate/attention/_shake.scss +6 -0
- data/stylesheets/animate/attention/_swing.scss +6 -0
- data/stylesheets/animate/attention/_tada.scss +5 -0
- data/stylesheets/animate/attention/_wiggle.scss +5 -0
- data/stylesheets/animate/attention/_wobble.scss +6 -0
- data/stylesheets/animate/bounce/_bounceIn.scss +7 -0
- data/stylesheets/animate/bounce/_bounceOut.scss +7 -0
- data/stylesheets/animate/fade/_fadeIn.scss +7 -0
- data/stylesheets/animate/fade/_fadeOut.scss +7 -0
- data/stylesheets/animate/flip/_flipIn.scss +6 -0
- data/stylesheets/animate/flip/_flipOut.scss +6 -0
- data/stylesheets/animate/lightSpeed/_lightSpeedIn.scss +7 -0
- data/stylesheets/animate/lightSpeed/_lightSpeedOut.scss +7 -0
- data/stylesheets/animate/roll/_rollIn.scss +7 -0
- data/stylesheets/animate/roll/_rollOut.scss +7 -0
- data/stylesheets/animate/rotate/_rotateIn.scss +7 -0
- data/stylesheets/animate/rotate/_rotateOut.scss +7 -0
- data/stylesheets/animate/special/_hinge.scss +6 -0
- metadata +10 -22
data/README.md
CHANGED
@@ -1,7 +1,15 @@
|
|
1
|
+
**Note:** This is still fairly new. All the core mixins and animations work,
|
2
|
+
but I don't promise the same for all the shortcuts,
|
3
|
+
and I know the documentation could use work.
|
4
|
+
If you run into any problems, please file and issue.
|
5
|
+
Even better, fix it and file a pull request.
|
6
|
+
|
7
|
+
Thanks!
|
8
|
+
|
1
9
|
Compass Animate
|
2
10
|
===============
|
3
11
|
|
4
|
-
This is the new home for
|
12
|
+
This is the new home for
|
5
13
|
Eric Meyer's Compass port of
|
6
14
|
[animate.css][animate]
|
7
15
|
by [Dan Eden][dan].
|
@@ -10,14 +18,14 @@ It is splitting off from
|
|
10
18
|
because the majority of that plugin
|
11
19
|
has moved into [Compass 0.13][c13].
|
12
20
|
This plugin is for people on the Compass edge,
|
13
|
-
while that plugin remains useful
|
21
|
+
while that plugin remains useful
|
14
22
|
to people who are still using Compass 0.12.
|
15
23
|
|
16
24
|
Compass Animate requires
|
17
25
|
Compass 0.13 (currently in alpha).
|
18
26
|
|
19
27
|
```bash
|
20
|
-
gem install
|
28
|
+
gem install animate --pre
|
21
29
|
```
|
22
30
|
|
23
31
|
```ruby
|
@@ -108,11 +116,11 @@ That will output:
|
|
108
116
|
75% { opacity: 0; }
|
109
117
|
100% { opacity: 1; } }
|
110
118
|
|
111
|
-
.flash {
|
112
|
-
-webkit-animation-name: flash;
|
113
|
-
-moz-animation-name: flash;
|
114
|
-
-ms-animation-name: flash;
|
115
|
-
-o-animation-name: flash;
|
119
|
+
.flash {
|
120
|
+
-webkit-animation-name: flash;
|
121
|
+
-moz-animation-name: flash;
|
122
|
+
-ms-animation-name: flash;
|
123
|
+
-o-animation-name: flash;
|
116
124
|
animation-name: flash; }
|
117
125
|
```
|
118
126
|
|
@@ -159,7 +167,7 @@ This plugin includes the following _mixins_ & animations:
|
|
159
167
|
|
160
168
|
**Fade**
|
161
169
|
- _fade_
|
162
|
-
- fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight,
|
170
|
+
- fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight,
|
163
171
|
fadeInUpBig, fadeInDownBig, fadeInLeftBig, fadeInRightBig
|
164
172
|
- fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight,
|
165
173
|
fadeOutUpBig, fadeOutDownBig, fadeOutLeftBig, fadeOutRightBig
|
@@ -176,12 +184,12 @@ This plugin includes the following _mixins_ & animations:
|
|
176
184
|
|
177
185
|
**Rotate**
|
178
186
|
- _rotate_
|
179
|
-
- rotateIn, rotateInDownLeft, rotateInDownRight,
|
187
|
+
- rotateIn, rotateInDownLeft, rotateInDownRight,
|
180
188
|
rotateInUpLeft, rotateInUpRight
|
181
|
-
- rotateOut, rotateOutDownLeft, rotateOutDownRight,
|
189
|
+
- rotateOut, rotateOutDownLeft, rotateOutDownRight,
|
182
190
|
rotateOutUpLeft, rotateOutUpRight
|
183
191
|
|
184
|
-
**
|
192
|
+
**LightSpeed**
|
185
193
|
- _lightSpeed_
|
186
194
|
- lightSpeedIn
|
187
195
|
- lightSpeedOut
|
data/stylesheets/_animate.scss
CHANGED
@@ -11,13 +11,13 @@
|
|
11
11
|
@import "animate/bounce";
|
12
12
|
@import "animate/fade";
|
13
13
|
@import "animate/flip";
|
14
|
-
@import "animate/
|
14
|
+
@import "animate/lightSpeed";
|
15
15
|
@import "animate/roll";
|
16
16
|
@import "animate/rotate";
|
17
17
|
@import "animate/special";
|
18
18
|
|
19
19
|
// ---------------------------------------------------------------------------
|
20
|
-
// animate [ attention | bounce | fade | flip |
|
20
|
+
// animate [ attention | bounce | fade | flip |
|
21
21
|
// lightSpeed | rotate | special | all ]
|
22
22
|
|
23
23
|
@mixin animate($sub: all, $class: $default-animation-class-mode) {
|
@@ -26,15 +26,15 @@
|
|
26
26
|
$bounce : yepnope($sub, all bounce);
|
27
27
|
$fade : yepnope($sub, all fade);
|
28
28
|
$flip : yepnope($sub, all flip);
|
29
|
-
$lightSpeed : yepnope($sub, all
|
29
|
+
$lightSpeed : yepnope($sub, all lightSpeed);
|
30
30
|
$rotate : yepnope($sub, all rotate);
|
31
31
|
$special : yepnope($sub, all special);
|
32
|
-
@if $attention { @include animate-attention (all, $class); }
|
33
|
-
@if $bounce { @include animate-bounce (all, $class); }
|
34
|
-
@if $fade { @include animate-fade (all, $class); }
|
35
|
-
@if $flip { @include animate-flip (all, $class); }
|
36
|
-
@if $lightSpeed { @include animate-lightSpeed (all, $class); }
|
37
|
-
@if $rotate { @include animate-rotate (all, $class); }
|
38
|
-
@if $special { @include animate-special (all, $class); }
|
32
|
+
@if $attention { @include animate-attention (all, $class); }
|
33
|
+
@if $bounce { @include animate-bounce (all, $class); }
|
34
|
+
@if $fade { @include animate-fade (all, $class); }
|
35
|
+
@if $flip { @include animate-flip (all, $class); }
|
36
|
+
@if $lightSpeed { @include animate-lightSpeed (all, $class); }
|
37
|
+
@if $rotate { @include animate-rotate (all, $class); }
|
38
|
+
@if $special { @include animate-special (all, $class); }
|
39
39
|
}
|
40
40
|
|
@@ -1,3 +1,10 @@
|
|
1
|
+
// ---------------------------------------------------------------------------
|
2
|
+
// imports
|
3
|
+
|
4
|
+
@import "compass/css3/animation";
|
5
|
+
@import "compass/css3/transform";
|
6
|
+
@import "compass/css3/opacity";
|
7
|
+
|
1
8
|
// ---------------------------------------------------------------------------
|
2
9
|
// bounceIn
|
3
10
|
|
@@ -1,3 +1,10 @@
|
|
1
|
+
// ---------------------------------------------------------------------------
|
2
|
+
// imports
|
3
|
+
|
4
|
+
@import "compass/css3/animation";
|
5
|
+
@import "compass/css3/transform";
|
6
|
+
@import "compass/css3/opacity";
|
7
|
+
|
1
8
|
// ---------------------------------------------------------------------------
|
2
9
|
// bounceOut
|
3
10
|
|
@@ -1,3 +1,10 @@
|
|
1
|
+
// ---------------------------------------------------------------------------
|
2
|
+
// imports
|
3
|
+
|
4
|
+
@import "compass/css3/animation";
|
5
|
+
@import "compass/css3/transform";
|
6
|
+
@import "compass/css3/opacity";
|
7
|
+
|
1
8
|
// ---------------------------------------------------------------------------
|
2
9
|
// fadeIn
|
3
10
|
|
@@ -1,3 +1,10 @@
|
|
1
|
+
// ---------------------------------------------------------------------------
|
2
|
+
// imports
|
3
|
+
|
4
|
+
@import "compass/css3/animation";
|
5
|
+
@import "compass/css3/transform";
|
6
|
+
@import "compass/css3/opacity";
|
7
|
+
|
1
8
|
// ---------------------------------------------------------------------------
|
2
9
|
// fadeOut
|
3
10
|
|
@@ -1,3 +1,9 @@
|
|
1
|
+
// ---------------------------------------------------------------------------
|
2
|
+
// imports
|
3
|
+
|
4
|
+
@import "compass/css3/animation";
|
5
|
+
@import "compass/css3/opacity";
|
6
|
+
|
1
7
|
// ---------------------------------------------------------------------------
|
2
8
|
// flipIn [ x | y | all ]
|
3
9
|
|
@@ -1,3 +1,9 @@
|
|
1
|
+
// ---------------------------------------------------------------------------
|
2
|
+
// imports
|
3
|
+
|
4
|
+
@import "compass/css3/animation";
|
5
|
+
@import "compass/css3/opacity";
|
6
|
+
|
1
7
|
// ---------------------------------------------------------------------------
|
2
8
|
// flipOut [ x | y | all ]
|
3
9
|
|
@@ -1,3 +1,10 @@
|
|
1
|
+
// ---------------------------------------------------------------------------
|
2
|
+
// imports
|
3
|
+
|
4
|
+
@import "compass/css3/animation";
|
5
|
+
@import "compass/css3/transform";
|
6
|
+
@import "compass/css3/opacity";
|
7
|
+
|
1
8
|
// ---------------------------------------------------------------------------
|
2
9
|
// lightSpeedIn
|
3
10
|
|
@@ -1,3 +1,10 @@
|
|
1
|
+
// ---------------------------------------------------------------------------
|
2
|
+
// imports
|
3
|
+
|
4
|
+
@import "compass/css3/animation";
|
5
|
+
@import "compass/css3/transform";
|
6
|
+
@import "compass/css3/opacity";
|
7
|
+
|
1
8
|
// ---------------------------------------------------------------------------
|
2
9
|
// lightSpeedOut
|
3
10
|
|
@@ -1,3 +1,10 @@
|
|
1
|
+
// ---------------------------------------------------------------------------
|
2
|
+
// imports
|
3
|
+
|
4
|
+
@import "compass/css3/animation";
|
5
|
+
@import "compass/css3/transform";
|
6
|
+
@import "compass/css3/opacity";
|
7
|
+
|
1
8
|
// ---------------------------------------------------------------------------
|
2
9
|
// rollIn
|
3
10
|
|
@@ -1,3 +1,10 @@
|
|
1
|
+
// ---------------------------------------------------------------------------
|
2
|
+
// imports
|
3
|
+
|
4
|
+
@import "compass/css3/animation";
|
5
|
+
@import "compass/css3/transform";
|
6
|
+
@import "compass/css3/opacity";
|
7
|
+
|
1
8
|
// ---------------------------------------------------------------------------
|
2
9
|
// rollOut
|
3
10
|
|
@@ -1,3 +1,10 @@
|
|
1
|
+
// ---------------------------------------------------------------------------
|
2
|
+
// imports
|
3
|
+
|
4
|
+
@import "compass/css3/animation";
|
5
|
+
@import "compass/css3/transform";
|
6
|
+
@import "compass/css3/opacity";
|
7
|
+
|
1
8
|
// ---------------------------------------------------------------------------
|
2
9
|
// rotateIn [ only | up | down | left | right |
|
3
10
|
// downLeft | downRight | upLeft | upRight | all ]
|
@@ -1,3 +1,10 @@
|
|
1
|
+
// ---------------------------------------------------------------------------
|
2
|
+
// imports
|
3
|
+
|
4
|
+
@import "compass/css3/animation";
|
5
|
+
@import "compass/css3/transform";
|
6
|
+
@import "compass/css3/opacity";
|
7
|
+
|
1
8
|
// ---------------------------------------------------------------------------
|
2
9
|
// rotateOut [ only | up | down | left | right |
|
3
10
|
// downLeft | downRight | upLeft | upRight | all ]
|
@@ -1,3 +1,9 @@
|
|
1
|
+
// ---------------------------------------------------------------------------
|
2
|
+
// imports
|
3
|
+
@import "compass/css3/animation";
|
4
|
+
@import "compass/css3/transform";
|
5
|
+
@import "compass/css3/opacity";
|
6
|
+
|
1
7
|
// ---------------------------------------------------------------------------
|
2
8
|
// hinge
|
3
9
|
|
metadata
CHANGED
@@ -1,14 +1,12 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: animate
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
|
5
|
-
prerelease: 4
|
4
|
+
prerelease: false
|
6
5
|
segments:
|
7
6
|
- 0
|
8
7
|
- 1
|
9
|
-
- alpha
|
10
8
|
- 0
|
11
|
-
version: 0.1.
|
9
|
+
version: 0.1.0
|
12
10
|
platform: ruby
|
13
11
|
authors:
|
14
12
|
- Eric Meyer
|
@@ -17,35 +15,30 @@ autorequire:
|
|
17
15
|
bindir: bin
|
18
16
|
cert_chain: []
|
19
17
|
|
20
|
-
date: 2012-
|
18
|
+
date: 2012-08-26 00:00:00 -06:00
|
19
|
+
default_executable:
|
21
20
|
dependencies:
|
22
21
|
- !ruby/object:Gem::Dependency
|
23
22
|
name: sass
|
24
23
|
prerelease: false
|
25
24
|
requirement: &id001 !ruby/object:Gem::Requirement
|
26
|
-
none: false
|
27
25
|
requirements:
|
28
26
|
- - ">="
|
29
27
|
- !ruby/object:Gem::Version
|
30
|
-
hash: 3005943801
|
31
28
|
segments:
|
32
29
|
- 3
|
33
30
|
- 2
|
34
31
|
- 0
|
35
|
-
|
36
|
-
- 95
|
37
|
-
version: 3.2.0.alpha.95
|
32
|
+
version: 3.2.0
|
38
33
|
type: :runtime
|
39
34
|
version_requirements: *id001
|
40
35
|
- !ruby/object:Gem::Dependency
|
41
36
|
name: compass
|
42
37
|
prerelease: false
|
43
38
|
requirement: &id002 !ruby/object:Gem::Requirement
|
44
|
-
none: false
|
45
39
|
requirements:
|
46
40
|
- - ">="
|
47
41
|
- !ruby/object:Gem::Version
|
48
|
-
hash: 3005943711
|
49
42
|
segments:
|
50
43
|
- 0
|
51
44
|
- 13
|
@@ -95,6 +88,7 @@ files:
|
|
95
88
|
- stylesheets/animate/rotate/_rotateIn.scss
|
96
89
|
- stylesheets/animate/rotate/_rotateOut.scss
|
97
90
|
- stylesheets/animate/special/_hinge.scss
|
91
|
+
has_rdoc: true
|
98
92
|
homepage: https://github.com/ericam/compass-animate
|
99
93
|
licenses: []
|
100
94
|
|
@@ -104,29 +98,23 @@ rdoc_options: []
|
|
104
98
|
require_paths:
|
105
99
|
- lib
|
106
100
|
required_ruby_version: !ruby/object:Gem::Requirement
|
107
|
-
none: false
|
108
101
|
requirements:
|
109
102
|
- - ">="
|
110
103
|
- !ruby/object:Gem::Version
|
111
|
-
hash: 3
|
112
104
|
segments:
|
113
105
|
- 0
|
114
106
|
version: "0"
|
115
107
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
116
|
-
none: false
|
117
108
|
requirements:
|
118
|
-
- - "
|
109
|
+
- - ">="
|
119
110
|
- !ruby/object:Gem::Version
|
120
|
-
hash: 25
|
121
111
|
segments:
|
122
|
-
-
|
123
|
-
|
124
|
-
- 1
|
125
|
-
version: 1.3.1
|
112
|
+
- 0
|
113
|
+
version: "0"
|
126
114
|
requirements: []
|
127
115
|
|
128
116
|
rubyforge_project:
|
129
|
-
rubygems_version: 1.
|
117
|
+
rubygems_version: 1.3.6
|
130
118
|
signing_key:
|
131
119
|
specification_version: 3
|
132
120
|
summary: Compass port of Animate.css by Dan Eden.
|