animation 0.1.alpha.2 → 0.1.alpha.3
Sign up to get free protection for your applications and to get access to all the features.
- data/README.mdown +17 -9
- data/stylesheets/animation/{animate.scss → _animate.scss} +1 -0
- data/stylesheets/animation/{core.scss → _core.scss} +50 -38
- data/stylesheets/animation/{experimental.scss → _shared.scss} +0 -0
- data/stylesheets/animation/animate/_classes.scss +21 -0
- data/stylesheets/animation/animate/_flippers.scss +87 -0
- metadata +9 -7
data/README.mdown
CHANGED
@@ -1,9 +1,9 @@
|
|
1
1
|
Animation Compass Plugin
|
2
2
|
========================
|
3
3
|
|
4
|
-
First and foremost, this plugin gives you all the tools you need to write and apply css3 animations. As a bonus, and only if you so choose, it also supplies you with a "shit-ton" (roughly 2 metric tons) of pre-fabricated animations taken from Dan Eden's "[Animate.css](http://daneden.me/animate/)" project.
|
4
|
+
First and foremost, this plugin gives you all the tools you need to write and apply css3 animations in compass. As a bonus, and only if you so choose, it also supplies you with a "shit-ton" (roughly 2 metric tons) of pre-fabricated animations taken from Dan Eden's "[Animate.css](http://daneden.me/animate/)" project.
|
5
5
|
|
6
|
-
**This plugin requires the most recent alpha releases of Sass 3.2.0 (alpha.
|
6
|
+
**This plugin requires the most recent alpha releases of Sass 3.2.0 (alpha.95) and Compass 0.12.0.**
|
7
7
|
|
8
8
|
gem install animation --pre
|
9
9
|
|
@@ -20,13 +20,14 @@ The default import only includes the core mixins for creating animations. They a
|
|
20
20
|
@content
|
21
21
|
|
22
22
|
// apply animation(s) and adjust settings
|
23
|
-
+animation-name([$name-1, $name-2, ..., name-10])
|
24
|
-
+animation-duration([$duration-1, $duration-2, ..., duration-10])
|
25
|
-
+animation-delay([$delay-1, $delay-2, ..., delay-10])
|
26
|
-
+animation-timing-function([$function-1, $function-2, ..., function-10])
|
27
|
-
+animation-iteration-count([$count-1, $count-2, ..., count-10])
|
28
|
-
+animation-direction([$direction-1, $direction-2, ..., direction-10])
|
29
|
-
+animation-fill-mode([$mode-1, $mode-2, ..., mode-10])
|
23
|
+
+animation-name([$name-1, $name-2, ..., $name-10])
|
24
|
+
+animation-duration([$duration-1, $duration-2, ..., $duration-10])
|
25
|
+
+animation-delay([$delay-1, $delay-2, ..., $delay-10])
|
26
|
+
+animation-timing-function([$function-1, $function-2, ..., $function-10])
|
27
|
+
+animation-iteration-count([$count-1, $count-2, ..., $count-10])
|
28
|
+
+animation-direction([$direction-1, $direction-2, ..., $direction-10])
|
29
|
+
+animation-fill-mode([$mode-1, $mode-2, ..., $mode-10])
|
30
|
+
+animation-play-state([$state-1, $state-2, ..., $state-10])
|
30
31
|
|
31
32
|
// shortcut to apply and adjust
|
32
33
|
+animation([$animation-1, $animation-2, ..., animation-10])
|
@@ -40,6 +41,7 @@ There are default variables available for all of them:
|
|
40
41
|
$default-animation-iteration-count : false
|
41
42
|
$default-animation-direction : false
|
42
43
|
$default-animation-fill-mode : false
|
44
|
+
$default-animation-play-state : false
|
43
45
|
|
44
46
|
## Animate.css
|
45
47
|
|
@@ -63,5 +65,11 @@ That will create the following named animations:
|
|
63
65
|
- `rotateIn` `rotateInDownLeft` `rotateInDownRight` `rotateInUpLeft` `rotateInUpRight`
|
64
66
|
* Rotating exits
|
65
67
|
- `rotateOut` `rotateOutDownLeft` `rotateOutDownRight` `rotateOutUpLeft` `rotateOutUpRight`
|
68
|
+
* Flippers
|
69
|
+
- `flip` `flipInX` `flipInY` `flipOutX` `flipOutY`
|
66
70
|
* Specials
|
67
71
|
- `hinge` `rollIn` `rollOut`
|
72
|
+
|
73
|
+
You can also import a set of predefined classes for each animation:
|
74
|
+
|
75
|
+
@import animation/animate/classes
|
@@ -1,32 +1,39 @@
|
|
1
|
-
@import "
|
1
|
+
@import "shared";
|
2
|
+
|
3
|
+
// CSS Animations.
|
2
4
|
|
3
|
-
// ---------------------------------------------------------------------------
|
4
5
|
// Apply an animation property and value with the correct browser support
|
5
6
|
@mixin animation-support($property, $value) {
|
6
|
-
@include experimental($property, $value, -moz, -webkit,
|
7
|
-
|
8
|
-
//
|
9
|
-
|
10
|
-
|
11
|
-
//
|
12
|
-
|
13
|
-
|
14
|
-
//
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
$default-animation-
|
19
|
-
|
20
|
-
|
21
|
-
$default-animation-
|
22
|
-
|
23
|
-
|
24
|
-
$default-animation-
|
25
|
-
|
26
|
-
//
|
27
|
-
|
28
|
-
|
29
|
-
//
|
7
|
+
@include experimental($property, $value, -moz, -webkit, -o, -ms, not -khtml, official); }
|
8
|
+
|
9
|
+
// Name of any animation as a string.
|
10
|
+
$default-animation-name : false !default;
|
11
|
+
|
12
|
+
// Duration of the entire animation in seconds.
|
13
|
+
$default-animation-duration : false !default;
|
14
|
+
|
15
|
+
// Delay for start of animation in seconds.
|
16
|
+
$default-animation-delay : false !default;
|
17
|
+
|
18
|
+
// The timing function(s) to be used between keyframes. [ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier($number, $number, $number, $number)]
|
19
|
+
$default-animation-timing-function : false !default;
|
20
|
+
|
21
|
+
// The number of times an animation cycle is played. [infinite | $number]
|
22
|
+
$default-animation-iteration-count : false !default;
|
23
|
+
|
24
|
+
// Whether or not the animation should play in reverse on alternate cycles. [normal | alternate]
|
25
|
+
$default-animation-direction : false !default;
|
26
|
+
|
27
|
+
// What values are applied by the animation outside the time it is executing. [none | forwards | backwards | both]
|
28
|
+
$default-animation-fill-mode : false !default;
|
29
|
+
|
30
|
+
// Whether the animation is running or paused. [running | paused]
|
31
|
+
$default-animation-play-state : false !default;
|
32
|
+
|
33
|
+
// Create a named animation sequence that can be applied to elements later.
|
34
|
+
//
|
35
|
+
// $name - The name of your animation.
|
36
|
+
// @content - The keyframes of the animation.
|
30
37
|
@mixin keyframes(
|
31
38
|
$name,
|
32
39
|
$moz: $experimental-support-for-mozilla,
|
@@ -68,48 +75,53 @@ $default-animation-fill-mode: false;
|
|
68
75
|
}
|
69
76
|
}
|
70
77
|
|
71
|
-
//
|
78
|
+
// Apply 1-10 animation names.
|
72
79
|
@mixin animation-name($name-1: $default-animation-name, $name-2: false, $name-3: false, $name-4: false, $name-5: false, $name-6: false, $name-7: false, $name-8: false, $name-9: false, $name-10: false) {
|
73
80
|
$name: compact($name-1, $name-2, $name-3, $name-4, $name-5, $name-6, $name-7, $name-8, $name-9, $name-10);
|
74
81
|
@include animation-support(animation-name, $name); }
|
75
82
|
|
76
|
-
//
|
83
|
+
// Apply 1-10 animation durations.
|
77
84
|
@mixin animation-duration($duration-1: $default-animation-duration, $duration-2: false, $duration-3: false, $duration-4: false, $duration-5: false, $duration-6: false, $duration-7: false, $duration-8: false, $duration-9: false, $duration-10: false) {
|
78
85
|
$duration: compact($duration-1, $duration-2, $duration-3, $duration-4, $duration-5, $duration-6, $duration-7, $duration-8, $duration-9, $duration-10);
|
79
86
|
@include animation-support(animation-duration, $duration); }
|
80
87
|
|
81
|
-
//
|
88
|
+
// Apply 1-10 animation delays.
|
82
89
|
@mixin animation-delay($delay-1: $default-animation-delay, $delay-2: false, $delay-3: false, $delay-4: false, $delay-5: false, $delay-6: false, $delay-7: false, $delay-8: false, $delay-9: false, $delay-10: false) {
|
83
90
|
$delay: compact($delay-1, $delay-2, $delay-3, $delay-4, $delay-5, $delay-6, $delay-7, $delay-8, $delay-9, $delay-10);
|
84
91
|
@include animation-support(animation-delay, $delay); }
|
85
92
|
|
86
|
-
//
|
93
|
+
// Apply 1-10 animation timing functions.
|
87
94
|
@mixin animation-timing-function($function-1: $default-animation-timing-function, $function-2: false, $function-3: false, $function-4: false, $function-5: false, $function-6: false, $function-7: false, $function-8: false, $function-9: false, $function-10: false) {
|
88
95
|
$function: compact($function-1, $function-2, $function-3, $function-4, $function-5, $function-6, $function-7, $function-8, $function-9, $function-10);
|
89
96
|
@include animation-support(animation-timing-function, $function); }
|
90
97
|
|
91
|
-
//
|
98
|
+
// Apply 1-10 animation iteration counts.
|
92
99
|
@mixin animation-iteration-count($count-1: $default-animation-iteration-count, $count-2: false, $count-3: false, $count-4: false, $count-5: false, $count-6: false, $count-7: false, $count-8: false, $count-9: false, $count-10: false) {
|
93
100
|
$count: compact($count-1, $count-2, $count-3, $count-4, $count-5, $count-6, $count-7, $count-8, $count-9, $count-10);
|
94
101
|
@include animation-support(animation-iteration-count, $count); }
|
95
102
|
|
96
|
-
//
|
103
|
+
// Apply 1-10 animation directions.
|
97
104
|
@mixin animation-direction($direction-1: $default-animation-direction, $direction-2: false, $direction-3: false, $direction-4: false, $direction-5: false, $direction-6: false, $direction-7: false, $direction-8: false, $direction-9: false, $direction-10: false) {
|
98
105
|
$direction: compact($direction-1, $direction-2, $direction-3, $direction-4, $direction-5, $direction-6, $direction-7, $direction-8, $direction-9, $direction-10);
|
99
106
|
@include animation-support(animation-direction, $direction); }
|
100
107
|
|
101
|
-
//
|
108
|
+
// Apply 1-10 animation fill modes.
|
102
109
|
@mixin animation-fill-mode($mode-1: $default-animation-fill-mode, $mode-2: false, $mode-3: false, $mode-4: false, $mode-5: false, $mode-6: false, $mode-7: false, $mode-8: false, $mode-9: false, $mode-10: false) {
|
103
110
|
$mode: compact($mode-1, $mode-2, $mode-3, $mode-4, $mode-5, $mode-6, $mode-7, $mode-8, $mode-9, $mode-10);
|
104
111
|
@include animation-support(animation-fill-mode, $mode); }
|
105
112
|
|
106
|
-
//
|
113
|
+
// Apply 1-10 animation play states.
|
114
|
+
@mixin animation-play-state($state-1: $default-animation-play-state, $state-2: false, $state-3: false, $state-4: false, $state-5: false, $state-6: false, $state-7: false, $state-8: false, $state-9: false, $state-10: false) {
|
115
|
+
$state: compact($state-1, $state-2, $state-3, $state-4, $state-5, $state-6, $state-7, $state-8, $state-9, $state-10);
|
116
|
+
@include animation-support(animation-play-state, $state); }
|
117
|
+
|
107
118
|
// Shortcut to apply a named animation to an element, with all the settings.
|
108
|
-
//
|
109
|
-
//
|
110
|
-
//
|
119
|
+
//
|
120
|
+
// $animation-1 : Name and settings for the first animation. [<values> | default]
|
121
|
+
// ...
|
122
|
+
// $animation-10 : Name and settings for the tenth animation. <values>
|
111
123
|
@mixin animation($animation-1: default, $animation-2: false, $animation-3: false, $animation-4: false, $animation-5: false, $animation-6: false, $animation-7: false, $animation-8: false, $animation-9: false, $animation-10: false) {
|
112
124
|
@if $animation-1 == default {
|
113
|
-
$animation-1: -compass-space-list(compact($default-animation-name, $default-animation-duration, $default-animation-timing-function, $default-animation-delay, $default-animation-iteration-count, $default-animation-direction, $default-animation-fill-mode)); }
|
125
|
+
$animation-1: -compass-space-list(compact($default-animation-name, $default-animation-duration, $default-animation-timing-function, $default-animation-delay, $default-animation-iteration-count, $default-animation-direction, $default-animation-fill-mode, $default-animation-play-state)); }
|
114
126
|
$animation: compact($animation-1, $animation-2, $animation-3, $animation-4, $animation-5, $animation-6, $animation-7, $animation-8, $animation-9, $animation-10);
|
115
127
|
@include animation-support(animation, $animation); }
|
File without changes
|
@@ -0,0 +1,21 @@
|
|
1
|
+
// .animated and .animated.hinge classes for external use
|
2
|
+
.animated {
|
3
|
+
@include animation(1s ease both); }
|
4
|
+
|
5
|
+
.animated.hinge {
|
6
|
+
@include animation(2s ease both); }
|
7
|
+
|
8
|
+
// Animations list
|
9
|
+
$animations: flash, shake, bounce, tada, swing, wobble, pulse, flip, flipInX, flipOutX, flipInY, flipOutY, fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight, fadeInUpBig, fadeInDownBig, fadeInLeftBig, fadeInRightBig, fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, fadeOutUpBig, fadeOutDownBig, fadeOutLeftBig, fadeOutRightBig, bounceIn, bounceInDown, bounceInUp, bounceInLeft, bounceInRight, bounceOut, bounceOutDown, bounceOutUp, bounceOutLeft, bounceOutRight, rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight, rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight, hinge, rollIn, rollOut;
|
10
|
+
|
11
|
+
// Animations that require backface-visibility
|
12
|
+
$backface: flip, flipInX, flipOutX, flipInY, flipOutY;
|
13
|
+
|
14
|
+
// Creation of the different classes
|
15
|
+
@each $anim in $animations {
|
16
|
+
.#{$anim} {
|
17
|
+
@if index($backface, $anim) {
|
18
|
+
@include backface-visibility(visible); }
|
19
|
+
@if $anim == "swing" {
|
20
|
+
@include transform-origin(top, center); }
|
21
|
+
@include animation-name($anim); } }
|
@@ -0,0 +1,87 @@
|
|
1
|
+
// ---------------------------------------------------------------------------
|
2
|
+
@include keyframes(flip) {
|
3
|
+
0% {
|
4
|
+
@include transform(perspective(400px) rotateY(0));
|
5
|
+
@include animation-timing-function(ease-out);
|
6
|
+
}
|
7
|
+
40% {
|
8
|
+
@include transform(perspective(400px) translateZ(150px) rotateY(170deg));
|
9
|
+
@include animation-timing-function(ease-out);
|
10
|
+
}
|
11
|
+
50% {
|
12
|
+
@include transform(perspective(400px) translateZ(150px) rotateY(190deg) scale(1));
|
13
|
+
@include animation-timing-function(ease-in);
|
14
|
+
}
|
15
|
+
80% {
|
16
|
+
@include transform(perspective(400px) rotateY(360deg) scale(0.95));
|
17
|
+
@include animation-timing-function(ease-in);
|
18
|
+
}
|
19
|
+
100% {
|
20
|
+
@include transform(perspective(400px) scale(1));
|
21
|
+
@include animation-timing-function(ease-in);
|
22
|
+
}
|
23
|
+
}
|
24
|
+
|
25
|
+
|
26
|
+
// ---------------------------------------------------------------------------
|
27
|
+
@include keyframes(flipInX) {
|
28
|
+
0% {
|
29
|
+
@include transform(perspective(400px) rotateX(90deg));
|
30
|
+
@include opacity(0);
|
31
|
+
}
|
32
|
+
40% {
|
33
|
+
@include transform(perspective(400px) rotateX(-10deg));
|
34
|
+
}
|
35
|
+
70% {
|
36
|
+
@include transform(perspective(400px) rotateX(10deg));
|
37
|
+
}
|
38
|
+
100% {
|
39
|
+
@include transform(perspective(400px) rotateX(0deg));
|
40
|
+
@include opacity(1);
|
41
|
+
}
|
42
|
+
}
|
43
|
+
|
44
|
+
|
45
|
+
// ---------------------------------------------------------------------------
|
46
|
+
@include keyframes(flipOutX) {
|
47
|
+
0% {
|
48
|
+
@include transform(perspective(400px) rotateX(0deg));
|
49
|
+
@include opacity(1);
|
50
|
+
}
|
51
|
+
100% {
|
52
|
+
@include transform(perspective(400px) rotateX(90deg));
|
53
|
+
@include opacity(0);
|
54
|
+
}
|
55
|
+
}
|
56
|
+
|
57
|
+
|
58
|
+
// ---------------------------------------------------------------------------
|
59
|
+
@include keyframes(flipInY) {
|
60
|
+
0% {
|
61
|
+
@include transform(perspective(400px) rotateY(90deg));
|
62
|
+
@include opacity(0);
|
63
|
+
}
|
64
|
+
40% {
|
65
|
+
@include transform(perspective(400px) rotateY(-10deg));
|
66
|
+
}
|
67
|
+
70% {
|
68
|
+
@include transform(perspective(400px) rotateY(10deg));
|
69
|
+
}
|
70
|
+
100% {
|
71
|
+
@include transform(perspective(400px) rotateY(0deg));
|
72
|
+
@include opacity(1);
|
73
|
+
}
|
74
|
+
}
|
75
|
+
|
76
|
+
|
77
|
+
// ---------------------------------------------------------------------------
|
78
|
+
@include keyframes(flipOutY) {
|
79
|
+
0% {
|
80
|
+
@include transform(perspective(400px) rotateY(0deg));
|
81
|
+
@include opacity(1);
|
82
|
+
}
|
83
|
+
100% {
|
84
|
+
@include transform(perspective(400px) rotateY(90deg));
|
85
|
+
@include opacity(0);
|
86
|
+
}
|
87
|
+
}
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: animation
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
hash: -
|
4
|
+
hash: -3702664286
|
5
5
|
prerelease: 4
|
6
6
|
segments:
|
7
7
|
- 0
|
8
8
|
- 1
|
9
9
|
- alpha
|
10
|
-
-
|
11
|
-
version: 0.1.alpha.
|
10
|
+
- 3
|
11
|
+
version: 0.1.alpha.3
|
12
12
|
platform: ruby
|
13
13
|
authors:
|
14
14
|
- Eric Meyer
|
@@ -16,7 +16,7 @@ autorequire:
|
|
16
16
|
bindir: bin
|
17
17
|
cert_chain: []
|
18
18
|
|
19
|
-
date: 2012-
|
19
|
+
date: 2012-04-04 00:00:00 Z
|
20
20
|
dependencies:
|
21
21
|
- !ruby/object:Gem::Dependency
|
22
22
|
name: sass
|
@@ -64,9 +64,14 @@ files:
|
|
64
64
|
- README.mdown
|
65
65
|
- lib/animation.rb
|
66
66
|
- stylesheets/_animation.scss
|
67
|
+
- stylesheets/animation/_animate.scss
|
68
|
+
- stylesheets/animation/_core.scss
|
69
|
+
- stylesheets/animation/_shared.scss
|
67
70
|
- stylesheets/animation/animate/_attention-seekers.scss
|
68
71
|
- stylesheets/animation/animate/_bouncing.scss
|
72
|
+
- stylesheets/animation/animate/_classes.scss
|
69
73
|
- stylesheets/animation/animate/_fading.scss
|
74
|
+
- stylesheets/animation/animate/_flippers.scss
|
70
75
|
- stylesheets/animation/animate/_rotating.scss
|
71
76
|
- stylesheets/animation/animate/_specials.scss
|
72
77
|
- stylesheets/animation/animate/bouncing/_bouncing-entrances.scss
|
@@ -75,9 +80,6 @@ files:
|
|
75
80
|
- stylesheets/animation/animate/fading/_fading-exits.scss
|
76
81
|
- stylesheets/animation/animate/rotating/_rotating-entrances.scss
|
77
82
|
- stylesheets/animation/animate/rotating/_rotating-exits.scss
|
78
|
-
- stylesheets/animation/animate.scss
|
79
|
-
- stylesheets/animation/core.scss
|
80
|
-
- stylesheets/animation/experimental.scss
|
81
83
|
homepage: https://github.com/ericam/compass-animation
|
82
84
|
licenses: []
|
83
85
|
|