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
data/README.mdown
CHANGED
|
@@ -3,4 +3,65 @@ Animation Compass Plugin
|
|
|
3
3
|
|
|
4
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.
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
**This plugin requires the most recent alpha releases of Sass 3.2.0 (alpha.93) and Compass 0.12.0.**
|
|
7
|
+
|
|
8
|
+
gem install animation --pre
|
|
9
|
+
|
|
10
|
+
require 'animation'
|
|
11
|
+
|
|
12
|
+
@import animation
|
|
13
|
+
|
|
14
|
+
## Animation
|
|
15
|
+
|
|
16
|
+
The default import only includes the core mixins for creating animations. They are:
|
|
17
|
+
|
|
18
|
+
// create your animation
|
|
19
|
+
+keyframes($name)
|
|
20
|
+
@content
|
|
21
|
+
|
|
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])
|
|
30
|
+
|
|
31
|
+
// shortcut to apply and adjust
|
|
32
|
+
+animation([$animation-1, $animation-2, ..., animation-10])
|
|
33
|
+
|
|
34
|
+
There are default variables available for all of them:
|
|
35
|
+
|
|
36
|
+
$default-animation-name : false
|
|
37
|
+
$default-animation-duration : false
|
|
38
|
+
$default-animation-delay : false
|
|
39
|
+
$default-animation-timing-function : false
|
|
40
|
+
$default-animation-iteration-count : false
|
|
41
|
+
$default-animation-direction : false
|
|
42
|
+
$default-animation-fill-mode : false
|
|
43
|
+
|
|
44
|
+
## Animate.css
|
|
45
|
+
|
|
46
|
+
Because the Animate code creates output, you need to import it (or one of it's sob-modules) directly:
|
|
47
|
+
|
|
48
|
+
@import animation/animate
|
|
49
|
+
|
|
50
|
+
That will create the following named animations:
|
|
51
|
+
|
|
52
|
+
* Attention seekers
|
|
53
|
+
- `flash` `bounce` `shake` `tada` `swing` `wobble` `pulse`
|
|
54
|
+
* Fading entrances
|
|
55
|
+
- `fadeIn` `fadeInUp` `fadeInDown` `fadeInLeft` `fadeInRight` `fadeInUpBig` `fadeInDownBig` `fadeInLeftBig` `fadeInRightBig`
|
|
56
|
+
* Fading exits
|
|
57
|
+
- `fadeOut` `fadeOutUp` `fadeOutDown` `fadeOutLeft` `fadeOutRight` `fadeOutUpBig` `fadeOutDownBig` `fadeOutLeftBig` `fadeOutRightBig`
|
|
58
|
+
* Bouncing entrances
|
|
59
|
+
- `bounceIn` `bounceInDown` `bounceInUp` `bounceInLeft` `bounceInRight`
|
|
60
|
+
* Bouncing exits
|
|
61
|
+
- `bounceOut` `bounceOutDown` `bounceOutUp` `bounceOutLeft` `bounceOutRight`
|
|
62
|
+
* Rotating entrances
|
|
63
|
+
- `rotateIn` `rotateInDownLeft` `rotateInDownRight` `rotateInUpLeft` `rotateInUpRight`
|
|
64
|
+
* Rotating exits
|
|
65
|
+
- `rotateOut` `rotateOutDownLeft` `rotateOutDownRight` `rotateOutUpLeft` `rotateOutUpRight`
|
|
66
|
+
* Specials
|
|
67
|
+
- `hinge` `rollIn` `rollOut`
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
// Core imported by default. You can also import 'animate' for predefined animations.
|
|
2
|
-
@import animation/core
|
|
2
|
+
@import "animation/core";
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
// Specials
|
|
21
21
|
// - hinge rollIn rollOut
|
|
22
22
|
// ---------------------------------------------------------------------------
|
|
23
|
-
@import animate/fading
|
|
24
|
-
@import animate/bouncing
|
|
25
|
-
@import animate/rotating
|
|
26
|
-
@import animate/attention-seekers
|
|
27
|
-
@import animate/specials
|
|
23
|
+
@import "animate/fading";
|
|
24
|
+
@import "animate/bouncing";
|
|
25
|
+
@import "animate/rotating";
|
|
26
|
+
@import "animate/attention-seekers";
|
|
27
|
+
@import "animate/specials";
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
// ---------------------------------------------------------------------------
|
|
2
|
+
@include 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
|
+
// ---------------------------------------------------------------------------
|
|
16
|
+
@include keyframes(bounce) {
|
|
17
|
+
0% {
|
|
18
|
+
@include translateY(0); }
|
|
19
|
+
20% {
|
|
20
|
+
@include translateY(0); }
|
|
21
|
+
40% {
|
|
22
|
+
@include translateY(-30px); }
|
|
23
|
+
50% {
|
|
24
|
+
@include translateY(0); }
|
|
25
|
+
60% {
|
|
26
|
+
@include translateY(-15px); }
|
|
27
|
+
80% {
|
|
28
|
+
@include translateY(0); }
|
|
29
|
+
100% {
|
|
30
|
+
@include translateY(0); } }
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
// ---------------------------------------------------------------------------
|
|
34
|
+
@include keyframes(shake) {
|
|
35
|
+
0% {
|
|
36
|
+
@include translateX(0); }
|
|
37
|
+
10% {
|
|
38
|
+
@include translateX(-10px); }
|
|
39
|
+
20% {
|
|
40
|
+
@include translateX(10px); }
|
|
41
|
+
30% {
|
|
42
|
+
@include translateX(-10px); }
|
|
43
|
+
40% {
|
|
44
|
+
@include translateX(10px); }
|
|
45
|
+
50% {
|
|
46
|
+
@include translateX(-10px); }
|
|
47
|
+
60% {
|
|
48
|
+
@include translateX(10px); }
|
|
49
|
+
70% {
|
|
50
|
+
@include translateX(-10px); }
|
|
51
|
+
80% {
|
|
52
|
+
@include translateX(10px); }
|
|
53
|
+
90% {
|
|
54
|
+
@include translateX(-10px); }
|
|
55
|
+
100% {
|
|
56
|
+
@include translateX(0); } }
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
// ---------------------------------------------------------------------------
|
|
60
|
+
@include keyframes(tada) {
|
|
61
|
+
0% {
|
|
62
|
+
@include scale(1); }
|
|
63
|
+
10% {
|
|
64
|
+
@include transform(scale(0.9) rotate(-3deg)); }
|
|
65
|
+
20% {
|
|
66
|
+
@include transform(scale(0.9) rotate(-3deg)); }
|
|
67
|
+
30% {
|
|
68
|
+
@include transform(scale(1.1) rotate(3deg)); }
|
|
69
|
+
40% {
|
|
70
|
+
@include transform(scale(1.1) rotate(-3deg)); }
|
|
71
|
+
50% {
|
|
72
|
+
@include transform(scale(1.1) rotate(3deg)); }
|
|
73
|
+
60% {
|
|
74
|
+
@include transform(scale(1.1) rotate(-3deg)); }
|
|
75
|
+
70% {
|
|
76
|
+
@include transform(scale(1.1) rotate(3deg)); }
|
|
77
|
+
80% {
|
|
78
|
+
@include transform(scale(1.1) rotate(-3deg)); }
|
|
79
|
+
90% {
|
|
80
|
+
@include transform(scale(1.1) rotate(3deg)); }
|
|
81
|
+
100% {
|
|
82
|
+
@include transform(scale(1) rotate(0)); } }
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
// ---------------------------------------------------------------------------
|
|
86
|
+
@include keyframes(swing) {
|
|
87
|
+
20%, 40%, 60%, 80%, 100% {
|
|
88
|
+
@include transform-origin(top center); }
|
|
89
|
+
20% {
|
|
90
|
+
@include rotate(15deg); }
|
|
91
|
+
40% {
|
|
92
|
+
@include rotate(-10deg); }
|
|
93
|
+
60% {
|
|
94
|
+
@include rotate(5deg); }
|
|
95
|
+
80% {
|
|
96
|
+
@include rotate(-5deg); }
|
|
97
|
+
100% {
|
|
98
|
+
@include rotate(0deg); } }
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
// ---------------------------------------------------------------------------
|
|
102
|
+
@include keyframes(wobble) {
|
|
103
|
+
0% {
|
|
104
|
+
@include translateX(0%); }
|
|
105
|
+
15% {
|
|
106
|
+
@include transform(translateX(-25%) rotate(-5deg)); }
|
|
107
|
+
30% {
|
|
108
|
+
@include transform(translateX(20%) rotate(3deg)); }
|
|
109
|
+
45% {
|
|
110
|
+
@include transform(translateX(-15%) rotate(-3deg)); }
|
|
111
|
+
60% {
|
|
112
|
+
@include transform(translateX(10%) rotate(2deg)); }
|
|
113
|
+
75% {
|
|
114
|
+
@include transform(translateX(-5%) rotate(-1deg)); }
|
|
115
|
+
100% {
|
|
116
|
+
@include transform(translateX(0%)); } }
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
// ---------------------------------------------------------------------------
|
|
120
|
+
@include keyframes(pulse) {
|
|
121
|
+
0% {
|
|
122
|
+
@include scale(1); }
|
|
123
|
+
50% {
|
|
124
|
+
@include scale(1.1); }
|
|
125
|
+
100% {
|
|
126
|
+
@include scale(1); } }
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
// ---------------------------------------------------------------------------
|
|
2
|
-
@import
|
|
3
|
-
@import
|
|
2
|
+
@import "bouncing/bouncing-exits";
|
|
3
|
+
@import "bouncing/bouncing-entrances";
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
// ---------------------------------------------------------------------------
|
|
2
|
-
@import fading/fading-exits
|
|
3
|
-
@import fading/fading-entrances
|
|
2
|
+
@import "fading/fading-exits";
|
|
3
|
+
@import "fading/fading-entrances";
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
// ---------------------------------------------------------------------------
|
|
2
|
-
@import
|
|
3
|
-
@import
|
|
2
|
+
@import "rotating/rotating-exits";
|
|
3
|
+
@import "rotating/rotating-entrances";
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
// ---------------------------------------------------------------------------
|
|
2
|
+
@include keyframes(hinge) {
|
|
3
|
+
0% {
|
|
4
|
+
@include rotate(0);
|
|
5
|
+
@include transform-origin(top left);
|
|
6
|
+
@include animation-timing-function(ease-in-out); }
|
|
7
|
+
20%, 60% {
|
|
8
|
+
@include rotate(80deg);
|
|
9
|
+
@include transform-origin(top left);
|
|
10
|
+
@include animation-timing-function(ease-in-out); }
|
|
11
|
+
40% {
|
|
12
|
+
@include rotate(60deg);
|
|
13
|
+
@include transform-origin(top left);
|
|
14
|
+
@include animation-timing-function(ease-in-out); }
|
|
15
|
+
80% {
|
|
16
|
+
@include transform(rotate(60deg) translateY(0));
|
|
17
|
+
@include opacity(1);
|
|
18
|
+
@include transform-origin(top left);
|
|
19
|
+
@include animation-timing-function(ease-in-out); }
|
|
20
|
+
100% {
|
|
21
|
+
@include translateY(700px);
|
|
22
|
+
@include opacity(0); } }
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
// ---------------------------------------------------------------------------
|
|
26
|
+
@include keyframes(rollIn) {
|
|
27
|
+
0% {
|
|
28
|
+
@include opacity(0);
|
|
29
|
+
@include transform(translateX(-100%) rotate(-120deg)); }
|
|
30
|
+
100% {
|
|
31
|
+
@include opacity(1);
|
|
32
|
+
@include transform(translateX(0px) rotate(0deg)); } }
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
// ---------------------------------------------------------------------------
|
|
36
|
+
@include keyframes(rollOut) {
|
|
37
|
+
0% {
|
|
38
|
+
@include opacity(1);
|
|
39
|
+
@include transform(translateX(0px) rotate(0deg)); }
|
|
40
|
+
100% {
|
|
41
|
+
@include opacity(0);
|
|
42
|
+
@include transform(translateX(-100%) rotate(-120deg)); } }
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
// ---------------------------------------------------------------------------
|
|
2
|
+
@include keyframes(bounceIn) {
|
|
3
|
+
0% {
|
|
4
|
+
opacity: 0;
|
|
5
|
+
@include scale(0.3); }
|
|
6
|
+
50% {
|
|
7
|
+
opacity: 1;
|
|
8
|
+
@include scale(1.05); }
|
|
9
|
+
70% {
|
|
10
|
+
@include scale(0.9); }
|
|
11
|
+
100% {
|
|
12
|
+
@include scale(1); } }
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
// ---------------------------------------------------------------------------
|
|
16
|
+
@include keyframes(bounceInDown) {
|
|
17
|
+
0% {
|
|
18
|
+
opacity: 0;
|
|
19
|
+
@include translateY(-2000px); }
|
|
20
|
+
60% {
|
|
21
|
+
opacity: 1;
|
|
22
|
+
@include translateY(30px); }
|
|
23
|
+
80% {
|
|
24
|
+
@include translateY(-10px); }
|
|
25
|
+
100% {
|
|
26
|
+
@include translateY(0); } }
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
// ---------------------------------------------------------------------------
|
|
30
|
+
@include keyframes(bounceInUp) {
|
|
31
|
+
0% {
|
|
32
|
+
opacity: 0;
|
|
33
|
+
@include translateY(2000px); }
|
|
34
|
+
60% {
|
|
35
|
+
opacity: 1;
|
|
36
|
+
@include translateY(-30px); }
|
|
37
|
+
80% {
|
|
38
|
+
@include translateY(10px); }
|
|
39
|
+
100% {
|
|
40
|
+
@include translateY(0); } }
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
// ---------------------------------------------------------------------------
|
|
44
|
+
@include keyframes(bounceInRight) {
|
|
45
|
+
0% {
|
|
46
|
+
opacity: 0;
|
|
47
|
+
@include translateX(2000px); }
|
|
48
|
+
60% {
|
|
49
|
+
opacity: 1;
|
|
50
|
+
@include translateX(-30px); }
|
|
51
|
+
80% {
|
|
52
|
+
@include translateX(10px); }
|
|
53
|
+
100% {
|
|
54
|
+
@include translateX(0); } }
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
// ---------------------------------------------------------------------------
|
|
58
|
+
@include keyframes(bounceInLeft) {
|
|
59
|
+
0% {
|
|
60
|
+
opacity: 0;
|
|
61
|
+
@include translateX(-2000px); }
|
|
62
|
+
60% {
|
|
63
|
+
opacity: 1;
|
|
64
|
+
@include translateX(30px); }
|
|
65
|
+
80% {
|
|
66
|
+
@include translateX(-10px); }
|
|
67
|
+
100% {
|
|
68
|
+
@include translateX(0); } }
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
// ---------------------------------------------------------------------------
|
|
2
|
+
@include keyframes(bounceOut) {
|
|
3
|
+
0% {
|
|
4
|
+
@include scale(1); }
|
|
5
|
+
25% {
|
|
6
|
+
@include scale(0.95); }
|
|
7
|
+
50% {
|
|
8
|
+
opacity: 1;
|
|
9
|
+
@include scale(1.1); }
|
|
10
|
+
100% {
|
|
11
|
+
opacity: 0;
|
|
12
|
+
@include scale(0.3); } }
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
// ---------------------------------------------------------------------------
|
|
16
|
+
@include keyframes(bounceOutUp) {
|
|
17
|
+
0% {
|
|
18
|
+
@include translateY(0); }
|
|
19
|
+
20% {
|
|
20
|
+
opacity: 1;
|
|
21
|
+
@include translateY(20px); }
|
|
22
|
+
100% {
|
|
23
|
+
opacity: 0;
|
|
24
|
+
@include translateY(-2000px); } }
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
// ---------------------------------------------------------------------------
|
|
28
|
+
@include keyframes(bounceOutDown) {
|
|
29
|
+
0% {
|
|
30
|
+
@include translateY(0); }
|
|
31
|
+
20% {
|
|
32
|
+
opacity: 1;
|
|
33
|
+
@include translateY(-20px); }
|
|
34
|
+
100% {
|
|
35
|
+
opacity: 0;
|
|
36
|
+
@include translateY(2000px); } }
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
// ---------------------------------------------------------------------------
|
|
40
|
+
@include keyframes(bounceOutLeft) {
|
|
41
|
+
0% {
|
|
42
|
+
@include translateX(0); }
|
|
43
|
+
20% {
|
|
44
|
+
opacity: 1;
|
|
45
|
+
@include translateX(20px); }
|
|
46
|
+
100% {
|
|
47
|
+
opacity: 0;
|
|
48
|
+
@include translateX(-2000px); } }
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
// ---------------------------------------------------------------------------
|
|
52
|
+
@include keyframes(bounceOutRight) {
|
|
53
|
+
0% {
|
|
54
|
+
@include translateX(0); }
|
|
55
|
+
20% {
|
|
56
|
+
opacity: 1;
|
|
57
|
+
@include translateX(-20px); }
|
|
58
|
+
100% {
|
|
59
|
+
opacity: 0;
|
|
60
|
+
@include translateX(2000px); } }
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
// ---------------------------------------------------------------------------
|
|
2
|
+
@include keyframes(fadeIn) {
|
|
3
|
+
0% {
|
|
4
|
+
opacity: 0; }
|
|
5
|
+
100% {
|
|
6
|
+
opacity: 1; } }
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
// ---------------------------------------------------------------------------
|
|
10
|
+
@include keyframes(fadeInUp) {
|
|
11
|
+
0% {
|
|
12
|
+
@include translateY(20px);
|
|
13
|
+
opacity: 0; }
|
|
14
|
+
100% {
|
|
15
|
+
@include translateY(0);
|
|
16
|
+
opacity: 1; } }
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
// ---------------------------------------------------------------------------
|
|
20
|
+
@include keyframes(fadeInDown) {
|
|
21
|
+
0% {
|
|
22
|
+
@include translateY(-20px);
|
|
23
|
+
opacity: 0; }
|
|
24
|
+
100% {
|
|
25
|
+
@include translateY(0);
|
|
26
|
+
opacity: 1; } }
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
// ---------------------------------------------------------------------------
|
|
30
|
+
@include keyframes(fadeInRight) {
|
|
31
|
+
0% {
|
|
32
|
+
@include translateX(20px);
|
|
33
|
+
opacity: 0; }
|
|
34
|
+
100% {
|
|
35
|
+
@include translateX(0);
|
|
36
|
+
opacity: 1; } }
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
// ---------------------------------------------------------------------------
|
|
40
|
+
@include keyframes(fadeInLeft) {
|
|
41
|
+
0% {
|
|
42
|
+
@include translateX(-20px);
|
|
43
|
+
opacity: 0; }
|
|
44
|
+
100% {
|
|
45
|
+
@include translateX(0);
|
|
46
|
+
opacity: 1; } }
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
// ---------------------------------------------------------------------------
|
|
50
|
+
@include keyframes(fadeInUpBig) {
|
|
51
|
+
0% {
|
|
52
|
+
@include translateY(2000px);
|
|
53
|
+
opacity: 0; }
|
|
54
|
+
100% {
|
|
55
|
+
@include translateY(0);
|
|
56
|
+
opacity: 1; } }
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
// ---------------------------------------------------------------------------
|
|
60
|
+
@include keyframes(fadeInDownBig) {
|
|
61
|
+
0% {
|
|
62
|
+
opacity: 0;
|
|
63
|
+
@include translateY(-2000px); }
|
|
64
|
+
100% {
|
|
65
|
+
opacity: 1;
|
|
66
|
+
@include translateY(0); } }
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
// ---------------------------------------------------------------------------
|
|
70
|
+
@include keyframes(fadeInRightBig) {
|
|
71
|
+
0% {
|
|
72
|
+
opacity: 0;
|
|
73
|
+
@include translateX(2000px); }
|
|
74
|
+
100% {
|
|
75
|
+
opacity: 1;
|
|
76
|
+
@include translateX(0); } }
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
// ---------------------------------------------------------------------------
|
|
80
|
+
@include keyframes(fadeInLeftBig) {
|
|
81
|
+
0% {
|
|
82
|
+
opacity: 0;
|
|
83
|
+
@include translateX(-2000px); }
|
|
84
|
+
100% {
|
|
85
|
+
opacity: 1;
|
|
86
|
+
@include translateX(0); } }
|