animate 0.1.alpha.0 → 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- 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.
|