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