animation 0.1.alpha.0 → 0.1.alpha.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.
- data/README.mdown +62 -1
- data/stylesheets/{_animation.sass → _animation.scss} +1 -1
- data/stylesheets/animation/{animate.sass → animate.scss} +5 -5
- data/stylesheets/animation/animate/_attention-seekers.scss +126 -0
- data/stylesheets/animation/animate/{_rotating.sass → _bouncing.scss} +2 -2
- data/stylesheets/animation/animate/{_fading.sass → _fading.scss} +2 -2
- data/stylesheets/animation/animate/{_bouncing.sass → _rotating.scss} +2 -2
- data/stylesheets/animation/animate/_specials.scss +42 -0
- data/stylesheets/animation/animate/bouncing/_bouncing-entrances.scss +68 -0
- data/stylesheets/animation/animate/bouncing/_bouncing-exits.scss +60 -0
- data/stylesheets/animation/animate/fading/_fading-entrances.scss +86 -0
- data/stylesheets/animation/animate/fading/_fading-exits.scss +86 -0
- data/stylesheets/animation/animate/rotating/_rotating-entrances.scss +58 -0
- data/stylesheets/animation/animate/rotating/_rotating-exits.scss +58 -0
- data/stylesheets/animation/core.scss +115 -0
- data/stylesheets/animation/experimental.scss +22 -0
- metadata +24 -24
- data/stylesheets/animation/animate/_attention-seekers.sass +0 -120
- data/stylesheets/animation/animate/_specials.sass +0 -40
- data/stylesheets/animation/animate/bouncing/_bouncing-entrances.sass +0 -64
- data/stylesheets/animation/animate/bouncing/_bouncing-exits.sass +0 -56
- data/stylesheets/animation/animate/fading/_fading-entrances.sass +0 -78
- data/stylesheets/animation/animate/fading/_fading-exits.sass +0 -78
- data/stylesheets/animation/animate/rotating/_rotating-entrances.sass +0 -54
- data/stylesheets/animation/animate/rotating/_rotating-exits.sass +0 -54
- data/stylesheets/animation/core.sass +0 -83
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
// ---------------------------------------------------------------------------
|
|
2
|
+
@include keyframes(fadeOut) {
|
|
3
|
+
0% {
|
|
4
|
+
opacity: 1; }
|
|
5
|
+
100% {
|
|
6
|
+
opacity: 0; } }
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
// ---------------------------------------------------------------------------
|
|
10
|
+
@include keyframes(fadeOutUp) {
|
|
11
|
+
0% {
|
|
12
|
+
@include translateY(0);
|
|
13
|
+
opacity: 1; }
|
|
14
|
+
100% {
|
|
15
|
+
@include translateY(-20px);
|
|
16
|
+
opacity: 0; } }
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
// ---------------------------------------------------------------------------
|
|
20
|
+
@include keyframes(fadeOutDown) {
|
|
21
|
+
0% {
|
|
22
|
+
@include translateY(0);
|
|
23
|
+
opacity: 1; }
|
|
24
|
+
100% {
|
|
25
|
+
@include translateY(20px);
|
|
26
|
+
opacity: 0; } }
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
// ---------------------------------------------------------------------------
|
|
30
|
+
@include keyframes(fadeOutRight) {
|
|
31
|
+
0% {
|
|
32
|
+
@include translateX(0);
|
|
33
|
+
opacity: 1; }
|
|
34
|
+
100% {
|
|
35
|
+
@include translateX(20px);
|
|
36
|
+
opacity: 0; } }
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
// ---------------------------------------------------------------------------
|
|
40
|
+
@include keyframes(fadeOutLeft) {
|
|
41
|
+
0% {
|
|
42
|
+
@include translateX(0);
|
|
43
|
+
opacity: 1; }
|
|
44
|
+
100% {
|
|
45
|
+
@include translateX(-20px);
|
|
46
|
+
opacity: 0; } }
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
// ---------------------------------------------------------------------------
|
|
50
|
+
@include keyframes(fadeOutUpBig) {
|
|
51
|
+
0% {
|
|
52
|
+
@include translateY(0);
|
|
53
|
+
opacity: 1; }
|
|
54
|
+
100% {
|
|
55
|
+
@include translateY(-2000px);
|
|
56
|
+
opacity: 0; } }
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
// ---------------------------------------------------------------------------
|
|
60
|
+
@include keyframes(fadeOutDownBig) {
|
|
61
|
+
0% {
|
|
62
|
+
opacity: 1;
|
|
63
|
+
@include translateY(0); }
|
|
64
|
+
100% {
|
|
65
|
+
opacity: 0;
|
|
66
|
+
@include translateY(2000px); } }
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
// ---------------------------------------------------------------------------
|
|
70
|
+
@include keyframes(fadeOutRightBig) {
|
|
71
|
+
0% {
|
|
72
|
+
opacity: 1;
|
|
73
|
+
@include translateX(0); }
|
|
74
|
+
100% {
|
|
75
|
+
opacity: 0;
|
|
76
|
+
@include translateX(2000px); } }
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
// ---------------------------------------------------------------------------
|
|
80
|
+
@include keyframes(fadeOutLeftBig) {
|
|
81
|
+
0% {
|
|
82
|
+
opacity: 1;
|
|
83
|
+
@include translateX(0); }
|
|
84
|
+
100% {
|
|
85
|
+
opacity: 0;
|
|
86
|
+
@include translateX(-2000px); } }
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
// ---------------------------------------------------------------------------
|
|
2
|
+
@include keyframes(rotateIn) {
|
|
3
|
+
0% {
|
|
4
|
+
@include transform-origin(center center);
|
|
5
|
+
@include rotate(-200deg);
|
|
6
|
+
opacity: 0; }
|
|
7
|
+
100% {
|
|
8
|
+
@include transform-origin(center center);
|
|
9
|
+
@include rotate(0);
|
|
10
|
+
opacity: 1; } }
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
// ---------------------------------------------------------------------------
|
|
14
|
+
@include keyframes(rotateInDownLeft) {
|
|
15
|
+
0% {
|
|
16
|
+
@include transform-origin(left bottom);
|
|
17
|
+
@include rotate(-90deg);
|
|
18
|
+
opacity: 0; }
|
|
19
|
+
100% {
|
|
20
|
+
@include transform-origin(left bottom);
|
|
21
|
+
@include rotate(0);
|
|
22
|
+
opacity: 1; } }
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
// ---------------------------------------------------------------------------
|
|
26
|
+
@include keyframes(rotateInUpLeft) {
|
|
27
|
+
0% {
|
|
28
|
+
@include transform-origin(left bottom);
|
|
29
|
+
@include rotate(90deg);
|
|
30
|
+
opacity: 0; }
|
|
31
|
+
100% {
|
|
32
|
+
@include transform-origin(left bottom);
|
|
33
|
+
@include rotate(0);
|
|
34
|
+
opacity: 1; } }
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
// ---------------------------------------------------------------------------
|
|
38
|
+
@include keyframes(rotateInUpRight) {
|
|
39
|
+
0% {
|
|
40
|
+
@include transform-origin(right bottom);
|
|
41
|
+
@include rotate(-90deg);
|
|
42
|
+
opacity: 0; }
|
|
43
|
+
100% {
|
|
44
|
+
@include transform-origin(right bottom);
|
|
45
|
+
@include rotate(0);
|
|
46
|
+
opacity: 1; } }
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
// ---------------------------------------------------------------------------
|
|
50
|
+
@include keyframes(rotateInDownRight) {
|
|
51
|
+
0% {
|
|
52
|
+
@include transform-origin(right bottom);
|
|
53
|
+
@include rotate(90deg);
|
|
54
|
+
opacity: 0; }
|
|
55
|
+
100% {
|
|
56
|
+
@include transform-origin(right bottom);
|
|
57
|
+
@include rotate(0);
|
|
58
|
+
opacity: 1; } }
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
// ---------------------------------------------------------------------------
|
|
2
|
+
@include keyframes(rotateOut) {
|
|
3
|
+
0% {
|
|
4
|
+
@include transform-origin(center center);
|
|
5
|
+
@include rotate(0);
|
|
6
|
+
opacity: 1; }
|
|
7
|
+
100% {
|
|
8
|
+
@include transform-origin(center center);
|
|
9
|
+
@include rotate(200deg);
|
|
10
|
+
opacity: 0; } }
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
// ---------------------------------------------------------------------------
|
|
14
|
+
@include keyframes(rotateOutDownLeft) {
|
|
15
|
+
0% {
|
|
16
|
+
@include transform-origin(left bottom);
|
|
17
|
+
@include rotate(0);
|
|
18
|
+
opacity: 1; }
|
|
19
|
+
100% {
|
|
20
|
+
@include transform-origin(left bottom);
|
|
21
|
+
@include rotate(90deg);
|
|
22
|
+
opacity: 0; } }
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
// ---------------------------------------------------------------------------
|
|
26
|
+
@include keyframes(rotateOutUpLeft) {
|
|
27
|
+
0% {
|
|
28
|
+
@include transform-origin(left bottom);
|
|
29
|
+
@include rotate(0);
|
|
30
|
+
opacity: 1; }
|
|
31
|
+
100% {
|
|
32
|
+
@include transform-origin(left bottom);
|
|
33
|
+
@include rotate(-90deg);
|
|
34
|
+
opacity: 0; } }
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
// ---------------------------------------------------------------------------
|
|
38
|
+
@include keyframes(rotateOutDownRight) {
|
|
39
|
+
0% {
|
|
40
|
+
@include transform-origin(right bottom);
|
|
41
|
+
@include rotate(0);
|
|
42
|
+
opacity: 1; }
|
|
43
|
+
100% {
|
|
44
|
+
@include transform-origin(right bottom);
|
|
45
|
+
@include rotate(-90deg);
|
|
46
|
+
opacity: 0; } }
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
// ---------------------------------------------------------------------------
|
|
50
|
+
@include keyframes(rotateOutUpRight) {
|
|
51
|
+
0% {
|
|
52
|
+
@include transform-origin(right bottom);
|
|
53
|
+
@include rotate(0);
|
|
54
|
+
opacity: 1; }
|
|
55
|
+
100% {
|
|
56
|
+
@include transform-origin(right bottom);
|
|
57
|
+
@include rotate(90deg);
|
|
58
|
+
opacity: 0; } }
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
@import "animation/experimental";
|
|
2
|
+
|
|
3
|
+
// ---------------------------------------------------------------------------
|
|
4
|
+
// Apply an animation property and value with the correct browser support
|
|
5
|
+
@mixin animation-support($property, $value) {
|
|
6
|
+
@include experimental($property, $value, -moz, -webkit, not -o, -ms, not -khtml, official); }
|
|
7
|
+
|
|
8
|
+
// ---------------------------------------------------------------------------
|
|
9
|
+
// Set your animation defaults.
|
|
10
|
+
// $default-animation-name : Name of any animation as a string. [<name>]
|
|
11
|
+
// $default-animation-duration : Duration of the entire animation. [<seconds>]
|
|
12
|
+
// $default-animation-delay : Delay for start of animation. [<seconds>]
|
|
13
|
+
// $default-animation-timing-function : The timing function(s) to be used between keyframes. [ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]
|
|
14
|
+
// $default-animation-iteration-count : The number of times an animation cycle is played. [infinite | <number>]
|
|
15
|
+
// $default-animation-direction : Whether or not the animation should play in reverse on alternate cycles. [normal | alternate]
|
|
16
|
+
// $default-animation-fill-mode : What values are applied by the animation outside the time it is executing. [none | forwards | backwards | both]
|
|
17
|
+
|
|
18
|
+
$default-animation-name: false;
|
|
19
|
+
$default-animation-duration: false;
|
|
20
|
+
$default-animation-delay: false;
|
|
21
|
+
$default-animation-timing-function: false;
|
|
22
|
+
$default-animation-iteration-count: false;
|
|
23
|
+
$default-animation-direction: false;
|
|
24
|
+
$default-animation-fill-mode: false;
|
|
25
|
+
|
|
26
|
+
// ---------------------------------------------------------------------------
|
|
27
|
+
// Create up a named animation sequesnce that can be applied to elements later.
|
|
28
|
+
// $name - The name of your animation.
|
|
29
|
+
// @content - The keyframes of the animation.
|
|
30
|
+
@mixin keyframes(
|
|
31
|
+
$name,
|
|
32
|
+
$moz: $experimental-support-for-mozilla,
|
|
33
|
+
$webkit: $experimental-support-for-webkit,
|
|
34
|
+
$o: $experimental-support-for-opera,
|
|
35
|
+
$ms: $experimental-support-for-microsoft,
|
|
36
|
+
$khtml: $experimental-support-for-khtml,
|
|
37
|
+
$official: true
|
|
38
|
+
) {
|
|
39
|
+
@if $moz {
|
|
40
|
+
@include with-only-support-for($moz: true) {
|
|
41
|
+
@-moz-keyframes #{$name} { @content; }
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
@if $webkit {
|
|
45
|
+
@include with-only-support-for($webkit: true) {
|
|
46
|
+
@-webkit-keyframes #{$name} { @content; }
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
@if $o {
|
|
50
|
+
@include with-only-support-for($o: true) {
|
|
51
|
+
@-o-keyframes #{$name} { @content; }
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
@if $ms {
|
|
55
|
+
@include with-only-support-for($ms: true) {
|
|
56
|
+
@-ms-keyframes #{$name} { @content; }
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
@if $khtml {
|
|
60
|
+
@include with-only-support-for($khtml: true) {
|
|
61
|
+
@-khtml-keyframes #{$name} { @content; }
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
@if $official {
|
|
65
|
+
@include with-only-support-for {
|
|
66
|
+
@keyframes #{$name} { @content; }
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// ---------------------------------------------------------------------------
|
|
72
|
+
@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
|
+
$name: compact($name-1, $name-2, $name-3, $name-4, $name-5, $name-6, $name-7, $name-8, $name-9, $name-10);
|
|
74
|
+
@include animation-support(animation-name, $name); }
|
|
75
|
+
|
|
76
|
+
// ---------------------------------------------------------------------------
|
|
77
|
+
@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
|
+
$duration: compact($duration-1, $duration-2, $duration-3, $duration-4, $duration-5, $duration-6, $duration-7, $duration-8, $duration-9, $duration-10);
|
|
79
|
+
@include animation-support(animation-duration, $duration); }
|
|
80
|
+
|
|
81
|
+
// ---------------------------------------------------------------------------
|
|
82
|
+
@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
|
+
$delay: compact($delay-1, $delay-2, $delay-3, $delay-4, $delay-5, $delay-6, $delay-7, $delay-8, $delay-9, $delay-10);
|
|
84
|
+
@include animation-support(animation-delay, $delay); }
|
|
85
|
+
|
|
86
|
+
// ---------------------------------------------------------------------------
|
|
87
|
+
@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
|
+
$function: compact($function-1, $function-2, $function-3, $function-4, $function-5, $function-6, $function-7, $function-8, $function-9, $function-10);
|
|
89
|
+
@include animation-support(animation-timing-function, $function); }
|
|
90
|
+
|
|
91
|
+
// ---------------------------------------------------------------------------
|
|
92
|
+
@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
|
+
$count: compact($count-1, $count-2, $count-3, $count-4, $count-5, $count-6, $count-7, $count-8, $count-9, $count-10);
|
|
94
|
+
@include animation-support(animation-iteration-count, $count); }
|
|
95
|
+
|
|
96
|
+
// ---------------------------------------------------------------------------
|
|
97
|
+
@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
|
+
$direction: compact($direction-1, $direction-2, $direction-3, $direction-4, $direction-5, $direction-6, $direction-7, $direction-8, $direction-9, $direction-10);
|
|
99
|
+
@include animation-support(animation-direction, $direction); }
|
|
100
|
+
|
|
101
|
+
// ---------------------------------------------------------------------------
|
|
102
|
+
@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
|
+
$mode: compact($mode-1, $mode-2, $mode-3, $mode-4, $mode-5, $mode-6, $mode-7, $mode-8, $mode-9, $mode-10);
|
|
104
|
+
@include animation-support(animation-fill-mode, $mode); }
|
|
105
|
+
|
|
106
|
+
// ---------------------------------------------------------------------------
|
|
107
|
+
// Shortcut to apply a named animation to an element, with all the settings.
|
|
108
|
+
// $animation-1 : Name and settings for the first animation. [<values> | default]
|
|
109
|
+
// ...
|
|
110
|
+
// $animation-10 : Name and settings for the tenth animation. <values>
|
|
111
|
+
@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
|
+
@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)); }
|
|
114
|
+
$animation: compact($animation-1, $animation-2, $animation-3, $animation-4, $animation-5, $animation-6, $animation-7, $animation-8, $animation-9, $animation-10);
|
|
115
|
+
@include animation-support(animation, $animation); }
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
@mixin set-experimental-support($moz: false, $webkit: false, $ms: false, $o: false, $khtml: false) {
|
|
2
|
+
$experimental-support-for-mozilla: $moz;
|
|
3
|
+
$experimental-support-for-webkit: $webkit;
|
|
4
|
+
$experimental-support-for-microsoft: $ms;
|
|
5
|
+
$experimental-support-for-opera: $o;
|
|
6
|
+
$experimental-support-for-khtml: $khtml;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@mixin with-only-support-for($moz: false, $webkit: false, $ms: false, $o: false, $khtml: false) {
|
|
10
|
+
// Capture the current state
|
|
11
|
+
$original-moz: $experimental-support-for-mozilla;
|
|
12
|
+
$original-webkit: $experimental-support-for-webkit;
|
|
13
|
+
$original-o: $experimental-support-for-opera;
|
|
14
|
+
$original-ms: $experimental-support-for-microsoft;
|
|
15
|
+
$original-khtml: $experimental-support-for-khtml;
|
|
16
|
+
|
|
17
|
+
@include set-experimental-support($moz, $webkit, $ms, $o, $khtml);
|
|
18
|
+
|
|
19
|
+
@content;
|
|
20
|
+
|
|
21
|
+
@include set-experimental-support($original-moz, $original-webkit, $original-ms, $original-o, $original-khtml);
|
|
22
|
+
}
|
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: -3702664282
|
|
5
5
|
prerelease: 4
|
|
6
6
|
segments:
|
|
7
7
|
- 0
|
|
8
8
|
- 1
|
|
9
9
|
- alpha
|
|
10
|
-
-
|
|
11
|
-
version: 0.1.alpha.
|
|
10
|
+
- 1
|
|
11
|
+
version: 0.1.alpha.1
|
|
12
12
|
platform: ruby
|
|
13
13
|
authors:
|
|
14
14
|
- Eric Meyer
|
|
@@ -26,14 +26,14 @@ dependencies:
|
|
|
26
26
|
requirements:
|
|
27
27
|
- - ">="
|
|
28
28
|
- !ruby/object:Gem::Version
|
|
29
|
-
hash: -
|
|
29
|
+
hash: -3702664282
|
|
30
30
|
segments:
|
|
31
31
|
- 3
|
|
32
32
|
- 2
|
|
33
33
|
- 0
|
|
34
34
|
- alpha
|
|
35
|
-
-
|
|
36
|
-
version: 3.2.0.alpha.
|
|
35
|
+
- 93
|
|
36
|
+
version: 3.2.0.alpha.93
|
|
37
37
|
type: :runtime
|
|
38
38
|
version_requirements: *id001
|
|
39
39
|
- !ruby/object:Gem::Dependency
|
|
@@ -44,16 +44,15 @@ dependencies:
|
|
|
44
44
|
requirements:
|
|
45
45
|
- - ">="
|
|
46
46
|
- !ruby/object:Gem::Version
|
|
47
|
-
hash:
|
|
47
|
+
hash: 47
|
|
48
48
|
segments:
|
|
49
49
|
- 0
|
|
50
50
|
- 12
|
|
51
|
-
- alpha
|
|
52
51
|
- 0
|
|
53
|
-
version: 0.12.
|
|
52
|
+
version: 0.12.0
|
|
54
53
|
type: :runtime
|
|
55
54
|
version_requirements: *id002
|
|
56
|
-
description: css3 animations plugin for compass
|
|
55
|
+
description: css3 animations plugin for compass, with core animation mixins, and optional defaul animations from animate.css.
|
|
57
56
|
email: eric@oddbird.net
|
|
58
57
|
executables: []
|
|
59
58
|
|
|
@@ -64,20 +63,21 @@ extra_rdoc_files: []
|
|
|
64
63
|
files:
|
|
65
64
|
- README.mdown
|
|
66
65
|
- lib/animation.rb
|
|
67
|
-
- stylesheets/_animation.
|
|
68
|
-
- stylesheets/animation/animate/_attention-seekers.
|
|
69
|
-
- stylesheets/animation/animate/_bouncing.
|
|
70
|
-
- stylesheets/animation/animate/_fading.
|
|
71
|
-
- stylesheets/animation/animate/_rotating.
|
|
72
|
-
- stylesheets/animation/animate/_specials.
|
|
73
|
-
- stylesheets/animation/animate/bouncing/_bouncing-entrances.
|
|
74
|
-
- stylesheets/animation/animate/bouncing/_bouncing-exits.
|
|
75
|
-
- stylesheets/animation/animate/fading/_fading-entrances.
|
|
76
|
-
- stylesheets/animation/animate/fading/_fading-exits.
|
|
77
|
-
- stylesheets/animation/animate/rotating/_rotating-entrances.
|
|
78
|
-
- stylesheets/animation/animate/rotating/_rotating-exits.
|
|
79
|
-
- stylesheets/animation/animate.
|
|
80
|
-
- stylesheets/animation/core.
|
|
66
|
+
- stylesheets/_animation.scss
|
|
67
|
+
- stylesheets/animation/animate/_attention-seekers.scss
|
|
68
|
+
- stylesheets/animation/animate/_bouncing.scss
|
|
69
|
+
- stylesheets/animation/animate/_fading.scss
|
|
70
|
+
- stylesheets/animation/animate/_rotating.scss
|
|
71
|
+
- stylesheets/animation/animate/_specials.scss
|
|
72
|
+
- stylesheets/animation/animate/bouncing/_bouncing-entrances.scss
|
|
73
|
+
- stylesheets/animation/animate/bouncing/_bouncing-exits.scss
|
|
74
|
+
- stylesheets/animation/animate/fading/_fading-entrances.scss
|
|
75
|
+
- stylesheets/animation/animate/fading/_fading-exits.scss
|
|
76
|
+
- stylesheets/animation/animate/rotating/_rotating-entrances.scss
|
|
77
|
+
- stylesheets/animation/animate/rotating/_rotating-exits.scss
|
|
78
|
+
- stylesheets/animation/animate.scss
|
|
79
|
+
- stylesheets/animation/core.scss
|
|
80
|
+
- stylesheets/animation/experimental.scss
|
|
81
81
|
homepage: https://github.com/ericam/compass-animation
|
|
82
82
|
licenses: []
|
|
83
83
|
|
|
@@ -1,120 +0,0 @@
|
|
|
1
|
-
// ---------------------------------------------------------------------------
|
|
2
|
-
+keyframes(flash)
|
|
3
|
-
0%
|
|
4
|
-
opacity: 1
|
|
5
|
-
25%
|
|
6
|
-
opacity: 0
|
|
7
|
-
50%
|
|
8
|
-
opacity: 1
|
|
9
|
-
75%
|
|
10
|
-
opacity: 0
|
|
11
|
-
100%
|
|
12
|
-
opacity: 1
|
|
13
|
-
|
|
14
|
-
// ---------------------------------------------------------------------------
|
|
15
|
-
+keyframes(bounce)
|
|
16
|
-
0%
|
|
17
|
-
+translateY(0)
|
|
18
|
-
20%
|
|
19
|
-
+translateY(0)
|
|
20
|
-
40%
|
|
21
|
-
+translateY(-30px)
|
|
22
|
-
50%
|
|
23
|
-
+translateY(0)
|
|
24
|
-
60%
|
|
25
|
-
+translateY(-15px)
|
|
26
|
-
80%
|
|
27
|
-
+translateY(0)
|
|
28
|
-
100%
|
|
29
|
-
+translateY(0)
|
|
30
|
-
|
|
31
|
-
// ---------------------------------------------------------------------------
|
|
32
|
-
+keyframes(shake)
|
|
33
|
-
0%
|
|
34
|
-
+translateX(0)
|
|
35
|
-
10%
|
|
36
|
-
+translateX(-10px)
|
|
37
|
-
20%
|
|
38
|
-
+translateX(10px)
|
|
39
|
-
30%
|
|
40
|
-
+translateX(-10px)
|
|
41
|
-
40%
|
|
42
|
-
+translateX(10px)
|
|
43
|
-
50%
|
|
44
|
-
+translateX(-10px)
|
|
45
|
-
60%
|
|
46
|
-
+translateX(10px)
|
|
47
|
-
70%
|
|
48
|
-
+translateX(-10px)
|
|
49
|
-
80%
|
|
50
|
-
+translateX(10px)
|
|
51
|
-
90%
|
|
52
|
-
+translateX(-10px)
|
|
53
|
-
100%
|
|
54
|
-
+translateX(0)
|
|
55
|
-
|
|
56
|
-
// ---------------------------------------------------------------------------
|
|
57
|
-
+keyframes(tada)
|
|
58
|
-
0%
|
|
59
|
-
+scale(1)
|
|
60
|
-
10%
|
|
61
|
-
+transform(scale(0.9) rotate(-3deg))
|
|
62
|
-
20%
|
|
63
|
-
+transform(scale(0.9) rotate(-3deg))
|
|
64
|
-
30%
|
|
65
|
-
+transform(scale(1.1) rotate(3deg))
|
|
66
|
-
40%
|
|
67
|
-
+transform(scale(1.1) rotate(-3deg))
|
|
68
|
-
50%
|
|
69
|
-
+transform(scale(1.1) rotate(3deg))
|
|
70
|
-
60%
|
|
71
|
-
+transform(scale(1.1) rotate(-3deg))
|
|
72
|
-
70%
|
|
73
|
-
+transform(scale(1.1) rotate(3deg))
|
|
74
|
-
80%
|
|
75
|
-
+transform(scale(1.1) rotate(-3deg))
|
|
76
|
-
90%
|
|
77
|
-
+transform(scale(1.1) rotate(3deg))
|
|
78
|
-
100%
|
|
79
|
-
+transform(scale(1) rotate(0))
|
|
80
|
-
|
|
81
|
-
// ---------------------------------------------------------------------------
|
|
82
|
-
+keyframes(swing)
|
|
83
|
-
20%, 40%, 60%, 80%, 100%
|
|
84
|
-
+transform-origin(top center)
|
|
85
|
-
20%
|
|
86
|
-
+rotate(15deg)
|
|
87
|
-
40%
|
|
88
|
-
+rotate(-10deg)
|
|
89
|
-
60%
|
|
90
|
-
+rotate(5deg)
|
|
91
|
-
80%
|
|
92
|
-
+rotate(-5deg)
|
|
93
|
-
100%
|
|
94
|
-
+rotate(0deg)
|
|
95
|
-
|
|
96
|
-
// ---------------------------------------------------------------------------
|
|
97
|
-
+keyframes(wobble)
|
|
98
|
-
0%
|
|
99
|
-
+translateX(0%)
|
|
100
|
-
15%
|
|
101
|
-
+transform(translateX(-25%) rotate(-5deg))
|
|
102
|
-
30%
|
|
103
|
-
+transform(translateX(20%) rotate(3deg))
|
|
104
|
-
45%
|
|
105
|
-
+transform(translateX(-15%) rotate(-3deg))
|
|
106
|
-
60%
|
|
107
|
-
+transform(translateX(10%) rotate(2deg))
|
|
108
|
-
75%
|
|
109
|
-
+transform(translateX(-5%) rotate(-1deg))
|
|
110
|
-
100%
|
|
111
|
-
+transform(translateX(0%))
|
|
112
|
-
|
|
113
|
-
// ---------------------------------------------------------------------------
|
|
114
|
-
+keyframes(pulse)
|
|
115
|
-
0%
|
|
116
|
-
+scale(1)
|
|
117
|
-
50%
|
|
118
|
-
+scale(1.1)
|
|
119
|
-
100%
|
|
120
|
-
+scale(1)
|