animate 0.1.0 → 0.2.beta.0
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/stylesheets/_animate.scss +15 -9
- data/stylesheets/_helpers.scss +10 -6
- data/stylesheets/animate/_attention.scss +13 -9
- data/stylesheets/animate/_bounce.scss +40 -34
- data/stylesheets/animate/_fade.scss +25 -21
- data/stylesheets/animate/_flip.scss +47 -33
- data/stylesheets/animate/_lightSpeed.scss +7 -3
- data/stylesheets/animate/_roll.scss +7 -3
- data/stylesheets/animate/_rotate.scss +17 -14
- data/stylesheets/animate/_special.scss +6 -2
- data/stylesheets/animate/attention/_flash.scss +21 -16
- data/stylesheets/animate/attention/_pulse.scss +15 -10
- data/stylesheets/animate/attention/_shake.scss +39 -34
- data/stylesheets/animate/attention/_swing.scss +24 -19
- data/stylesheets/animate/attention/_tada.scss +38 -33
- data/stylesheets/animate/attention/_wiggle.scss +39 -34
- data/stylesheets/animate/attention/_wobble.scss +27 -22
- data/stylesheets/animate/bounce/_bounceIn.scss +100 -75
- data/stylesheets/animate/bounce/_bounceOut.scss +88 -63
- data/stylesheets/animate/fade/_fadeIn.scss +133 -88
- data/stylesheets/animate/fade/_fadeOut.scss +133 -88
- data/stylesheets/animate/flip/_flipIn.scss +47 -33
- data/stylesheets/animate/flip/_flipOut.scss +35 -21
- data/stylesheets/animate/lightSpeed/_lightSpeedIn.scss +22 -17
- data/stylesheets/animate/lightSpeed/_lightSpeedOut.scss +14 -9
- data/stylesheets/animate/roll/_rollIn.scss +14 -9
- data/stylesheets/animate/roll/_rollOut.scss +13 -8
- data/stylesheets/animate/rotate/_rotateIn.scss +114 -72
- data/stylesheets/animate/rotate/_rotateOut.scss +114 -72
- data/stylesheets/animate/special/_hinge.scss +32 -27
- metadata +10 -7
@@ -8,23 +8,28 @@
|
|
8
8
|
// ---------------------------------------------------------------------------
|
9
9
|
// bounceIn
|
10
10
|
|
11
|
-
@mixin animate-bounceIn(
|
11
|
+
@mixin animate-bounceIn(
|
12
|
+
$class : $default-animation-class-mode,
|
13
|
+
$keyframes : $default-keyframes-output
|
14
|
+
) {
|
12
15
|
$name: bounceIn;
|
13
|
-
@
|
14
|
-
|
15
|
-
|
16
|
-
|
16
|
+
@if $keyframes {
|
17
|
+
@include keyframes($name) {
|
18
|
+
0% {
|
19
|
+
opacity: 0;
|
20
|
+
@include scale(0.3);
|
21
|
+
}
|
22
|
+
50% {
|
23
|
+
opacity: 1;
|
24
|
+
@include scale(1.05);
|
25
|
+
}
|
26
|
+
70% {
|
27
|
+
@include scale(0.9);
|
28
|
+
}
|
29
|
+
100% {
|
30
|
+
@include scale(1);
|
31
|
+
}
|
17
32
|
}
|
18
|
-
50% {
|
19
|
-
opacity: 1;
|
20
|
-
@include scale(1.05);
|
21
|
-
}
|
22
|
-
70% {
|
23
|
-
@include scale(0.9);
|
24
|
-
}
|
25
|
-
100% {
|
26
|
-
@include scale(1);
|
27
|
-
}
|
28
33
|
}
|
29
34
|
@include animation-class($name, $class) {}
|
30
35
|
}
|
@@ -32,23 +37,28 @@
|
|
32
37
|
// ---------------------------------------------------------------------------
|
33
38
|
// bounceInDown
|
34
39
|
|
35
|
-
@mixin animate-bounceInDown(
|
40
|
+
@mixin animate-bounceInDown(
|
41
|
+
$class : $default-animation-class-mode,
|
42
|
+
$keyframes : $default-keyframes-output
|
43
|
+
) {
|
36
44
|
$name: bounceInDown;
|
37
|
-
@
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
+
@if $keyframes {
|
46
|
+
@include keyframes($name) {
|
47
|
+
0% {
|
48
|
+
opacity: 0;
|
49
|
+
@include translateY(-2000px);
|
50
|
+
}
|
51
|
+
60% {
|
52
|
+
opacity: 1;
|
53
|
+
@include translateY(30px);
|
54
|
+
}
|
55
|
+
80% {
|
56
|
+
@include translateY(-10px);
|
57
|
+
}
|
58
|
+
100% {
|
59
|
+
@include translateY(0);
|
60
|
+
}
|
45
61
|
}
|
46
|
-
80% {
|
47
|
-
@include translateY(-10px);
|
48
|
-
}
|
49
|
-
100% {
|
50
|
-
@include translateY(0);
|
51
|
-
}
|
52
62
|
}
|
53
63
|
@include animation-class($name, $class) {}
|
54
64
|
}
|
@@ -56,23 +66,28 @@
|
|
56
66
|
// ---------------------------------------------------------------------------
|
57
67
|
// bounceInUp
|
58
68
|
|
59
|
-
@mixin animate-bounceInUp(
|
69
|
+
@mixin animate-bounceInUp(
|
70
|
+
$class : $default-animation-class-mode,
|
71
|
+
$keyframes : $default-keyframes-output
|
72
|
+
) {
|
60
73
|
$name: bounceInUp;
|
61
|
-
@
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
74
|
+
@if $keyframes {
|
75
|
+
@include keyframes($name) {
|
76
|
+
0% {
|
77
|
+
opacity: 0;
|
78
|
+
@include translateY(2000px);
|
79
|
+
}
|
80
|
+
60% {
|
81
|
+
opacity: 1;
|
82
|
+
@include translateY(-30px);
|
83
|
+
}
|
84
|
+
80% {
|
85
|
+
@include translateY(10px);
|
86
|
+
}
|
87
|
+
100% {
|
88
|
+
@include translateY(0);
|
89
|
+
}
|
69
90
|
}
|
70
|
-
80% {
|
71
|
-
@include translateY(10px);
|
72
|
-
}
|
73
|
-
100% {
|
74
|
-
@include translateY(0);
|
75
|
-
}
|
76
91
|
}
|
77
92
|
@include animation-class($name, $class) {}
|
78
93
|
}
|
@@ -80,23 +95,28 @@
|
|
80
95
|
// ---------------------------------------------------------------------------
|
81
96
|
// bounceInRight
|
82
97
|
|
83
|
-
@mixin animate-bounceInRight(
|
98
|
+
@mixin animate-bounceInRight(
|
99
|
+
$class : $default-animation-class-mode,
|
100
|
+
$keyframes : $default-keyframes-output
|
101
|
+
) {
|
84
102
|
$name: bounceInRight;
|
85
|
-
@
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
103
|
+
@if $keyframes {
|
104
|
+
@include keyframes($name) {
|
105
|
+
0% {
|
106
|
+
opacity: 0;
|
107
|
+
@include translateX(2000px);
|
108
|
+
}
|
109
|
+
60% {
|
110
|
+
opacity: 1;
|
111
|
+
@include translateX(-30px);
|
112
|
+
}
|
113
|
+
80% {
|
114
|
+
@include translateX(10px);
|
115
|
+
}
|
116
|
+
100% {
|
117
|
+
@include translateX(0);
|
118
|
+
}
|
96
119
|
}
|
97
|
-
100% {
|
98
|
-
@include translateX(0);
|
99
|
-
}
|
100
120
|
}
|
101
121
|
@include animation-class($name, $class) {}
|
102
122
|
}
|
@@ -104,23 +124,28 @@
|
|
104
124
|
// ---------------------------------------------------------------------------
|
105
125
|
// bounceInLeft
|
106
126
|
|
107
|
-
@mixin animate-bounceInLeft(
|
127
|
+
@mixin animate-bounceInLeft(
|
128
|
+
$class : $default-animation-class-mode,
|
129
|
+
$keyframes : $default-keyframes-output
|
130
|
+
) {
|
108
131
|
$name: bounceInLeft;
|
109
|
-
@
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
132
|
+
@if $keyframes {
|
133
|
+
@include keyframes($name) {
|
134
|
+
0% {
|
135
|
+
opacity: 0;
|
136
|
+
@include translateX(-2000px);
|
137
|
+
}
|
138
|
+
60% {
|
139
|
+
opacity: 1;
|
140
|
+
@include translateX(30px);
|
141
|
+
}
|
142
|
+
80% {
|
143
|
+
@include translateX(-10px);
|
144
|
+
}
|
145
|
+
100% {
|
146
|
+
@include translateX(0);
|
147
|
+
}
|
120
148
|
}
|
121
|
-
100% {
|
122
|
-
@include translateX(0);
|
123
|
-
}
|
124
149
|
}
|
125
150
|
@include animation-class($name, $class) {}
|
126
151
|
}
|
@@ -8,23 +8,28 @@
|
|
8
8
|
// ---------------------------------------------------------------------------
|
9
9
|
// bounceOut
|
10
10
|
|
11
|
-
@mixin animate-bounceOut(
|
11
|
+
@mixin animate-bounceOut(
|
12
|
+
$class : $default-animation-class-mode,
|
13
|
+
$keyframes : $default-keyframes-output
|
14
|
+
) {
|
12
15
|
$name: bounceOut;
|
13
|
-
@
|
14
|
-
|
15
|
-
|
16
|
+
@if $keyframes {
|
17
|
+
@include keyframes(bounceOut) {
|
18
|
+
0% {
|
19
|
+
@include scale(1);
|
20
|
+
}
|
21
|
+
25% {
|
22
|
+
@include scale(0.95);
|
23
|
+
}
|
24
|
+
50% {
|
25
|
+
opacity: 1;
|
26
|
+
@include scale(1.1);
|
27
|
+
}
|
28
|
+
100% {
|
29
|
+
opacity: 0;
|
30
|
+
@include scale(0.3);
|
31
|
+
}
|
16
32
|
}
|
17
|
-
25% {
|
18
|
-
@include scale(0.95);
|
19
|
-
}
|
20
|
-
50% {
|
21
|
-
opacity: 1;
|
22
|
-
@include scale(1.1);
|
23
|
-
}
|
24
|
-
100% {
|
25
|
-
opacity: 0;
|
26
|
-
@include scale(0.3);
|
27
|
-
}
|
28
33
|
}
|
29
34
|
@include animation-class($name, $class) {}
|
30
35
|
}
|
@@ -32,20 +37,25 @@
|
|
32
37
|
// ---------------------------------------------------------------------------
|
33
38
|
// bounceOutUp
|
34
39
|
|
35
|
-
@mixin animate-bounceOutUp(
|
40
|
+
@mixin animate-bounceOutUp(
|
41
|
+
$class : $default-animation-class-mode,
|
42
|
+
$keyframes : $default-keyframes-output
|
43
|
+
) {
|
36
44
|
$name: bounceOutUp;
|
37
|
-
@
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
45
|
+
@if $keyframes {
|
46
|
+
@include keyframes($name) {
|
47
|
+
0% {
|
48
|
+
@include translateY(0);
|
49
|
+
}
|
50
|
+
20% {
|
51
|
+
opacity: 1;
|
52
|
+
@include translateY(20px);
|
53
|
+
}
|
54
|
+
100% {
|
55
|
+
opacity: 0;
|
56
|
+
@include translateY(-2000px);
|
57
|
+
}
|
44
58
|
}
|
45
|
-
100% {
|
46
|
-
opacity: 0;
|
47
|
-
@include translateY(-2000px);
|
48
|
-
}
|
49
59
|
}
|
50
60
|
@include animation-class($name, $class) {}
|
51
61
|
}
|
@@ -53,20 +63,25 @@
|
|
53
63
|
// ---------------------------------------------------------------------------
|
54
64
|
// bounceOutDown
|
55
65
|
|
56
|
-
@mixin animate-bounceOutDown(
|
66
|
+
@mixin animate-bounceOutDown(
|
67
|
+
$class : $default-animation-class-mode,
|
68
|
+
$keyframes : $default-keyframes-output
|
69
|
+
) {
|
57
70
|
$name: bounceOutDown;
|
58
|
-
@
|
59
|
-
|
60
|
-
|
71
|
+
@if $keyframes {
|
72
|
+
@include keyframes($name) {
|
73
|
+
0% {
|
74
|
+
@include translateY(0);
|
75
|
+
}
|
76
|
+
20% {
|
77
|
+
opacity: 1;
|
78
|
+
@include translateY(-20px);
|
79
|
+
}
|
80
|
+
100% {
|
81
|
+
opacity: 0;
|
82
|
+
@include translateY(2000px);
|
83
|
+
}
|
61
84
|
}
|
62
|
-
20% {
|
63
|
-
opacity: 1;
|
64
|
-
@include translateY(-20px);
|
65
|
-
}
|
66
|
-
100% {
|
67
|
-
opacity: 0;
|
68
|
-
@include translateY(2000px);
|
69
|
-
}
|
70
85
|
}
|
71
86
|
@include animation-class($name, $class) {}
|
72
87
|
}
|
@@ -74,20 +89,25 @@
|
|
74
89
|
// ---------------------------------------------------------------------------
|
75
90
|
// bounceOutLeft
|
76
91
|
|
77
|
-
@mixin animate-bounceOutLeft(
|
92
|
+
@mixin animate-bounceOutLeft(
|
93
|
+
$class : $default-animation-class-mode,
|
94
|
+
$keyframes : $default-keyframes-output
|
95
|
+
) {
|
78
96
|
$name: bounceOutLeft;
|
79
|
-
@
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
97
|
+
@if $keyframes {
|
98
|
+
@include keyframes($name) {
|
99
|
+
0% {
|
100
|
+
@include translateX(0);
|
101
|
+
}
|
102
|
+
20% {
|
103
|
+
opacity: 1;
|
104
|
+
@include translateX(20px);
|
105
|
+
}
|
106
|
+
100% {
|
107
|
+
opacity: 0;
|
108
|
+
@include translateX(-2000px);
|
109
|
+
}
|
86
110
|
}
|
87
|
-
100% {
|
88
|
-
opacity: 0;
|
89
|
-
@include translateX(-2000px);
|
90
|
-
}
|
91
111
|
}
|
92
112
|
@include animation-class($name, $class) {}
|
93
113
|
}
|
@@ -95,20 +115,25 @@
|
|
95
115
|
// ---------------------------------------------------------------------------
|
96
116
|
// bounceOutRight
|
97
117
|
|
98
|
-
@mixin animate-bounceOutRight(
|
118
|
+
@mixin animate-bounceOutRight(
|
119
|
+
$class : $default-animation-class-mode,
|
120
|
+
$keyframes : $default-keyframes-output
|
121
|
+
) {
|
99
122
|
$name: bounceOutRight;
|
100
|
-
@
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
123
|
+
@if $keyframes {
|
124
|
+
@include keyframes($name) {
|
125
|
+
0% {
|
126
|
+
@include translateX(0);
|
127
|
+
}
|
128
|
+
20% {
|
129
|
+
opacity: 1;
|
130
|
+
@include translateX(-20px);
|
131
|
+
}
|
132
|
+
100% {
|
133
|
+
opacity: 0;
|
134
|
+
@include translateX(2000px);
|
135
|
+
}
|
107
136
|
}
|
108
|
-
100% {
|
109
|
-
opacity: 0;
|
110
|
-
@include translateX(2000px);
|
111
|
-
}
|
112
137
|
}
|
113
138
|
@include animation-class($name, $class) {}
|
114
139
|
}
|
@@ -8,15 +8,20 @@
|
|
8
8
|
// ---------------------------------------------------------------------------
|
9
9
|
// fadeIn
|
10
10
|
|
11
|
-
@mixin animate-fadeIn(
|
12
|
-
$
|
13
|
-
|
14
|
-
|
15
|
-
|
11
|
+
@mixin animate-fadeIn(
|
12
|
+
$class : $default-animation-class-mode,
|
13
|
+
$keyframes : $default-keyframes-output
|
14
|
+
) {
|
15
|
+
$name: fadeIn;
|
16
|
+
@if $keyframes {
|
17
|
+
@include keyframes($name) {
|
18
|
+
0% {
|
19
|
+
opacity: 0;
|
20
|
+
}
|
21
|
+
100% {
|
22
|
+
opacity: 1;
|
23
|
+
}
|
16
24
|
}
|
17
|
-
100% {
|
18
|
-
opacity: 1;
|
19
|
-
}
|
20
25
|
}
|
21
26
|
@include animation-class($name, $class) {}
|
22
27
|
}
|
@@ -24,17 +29,22 @@
|
|
24
29
|
// ---------------------------------------------------------------------------
|
25
30
|
// fadeInUp
|
26
31
|
|
27
|
-
@mixin animate-fadeInUp(
|
28
|
-
$
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
32
|
+
@mixin animate-fadeInUp(
|
33
|
+
$class : $default-animation-class-mode,
|
34
|
+
$keyframes : $default-keyframes-output
|
35
|
+
) {
|
36
|
+
$name: fadeInUp;
|
37
|
+
@if $keyframes {
|
38
|
+
@include keyframes($name) {
|
39
|
+
0% {
|
40
|
+
@include translateY(20px);
|
41
|
+
opacity: 0;
|
42
|
+
}
|
43
|
+
100% {
|
44
|
+
@include translateY(0);
|
45
|
+
opacity: 1;
|
46
|
+
}
|
33
47
|
}
|
34
|
-
100% {
|
35
|
-
@include translateY(0);
|
36
|
-
opacity: 1;
|
37
|
-
}
|
38
48
|
}
|
39
49
|
@include animation-class($name, $class) {}
|
40
50
|
}
|
@@ -42,17 +52,22 @@
|
|
42
52
|
// ---------------------------------------------------------------------------
|
43
53
|
// fadeInDown
|
44
54
|
|
45
|
-
@mixin animate-fadeInDown(
|
46
|
-
$
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
55
|
+
@mixin animate-fadeInDown(
|
56
|
+
$class : $default-animation-class-mode,
|
57
|
+
$keyframes : $default-keyframes-output
|
58
|
+
) {
|
59
|
+
$name: fadeInDown;
|
60
|
+
@if $keyframes {
|
61
|
+
@include keyframes($name) {
|
62
|
+
0% {
|
63
|
+
@include translateY(-20px);
|
64
|
+
opacity: 0;
|
65
|
+
}
|
66
|
+
100% {
|
67
|
+
@include translateY(0);
|
68
|
+
opacity: 1;
|
69
|
+
}
|
51
70
|
}
|
52
|
-
100% {
|
53
|
-
@include translateY(0);
|
54
|
-
opacity: 1;
|
55
|
-
}
|
56
71
|
}
|
57
72
|
@include animation-class($name, $class) {}
|
58
73
|
}
|
@@ -60,17 +75,22 @@
|
|
60
75
|
// ---------------------------------------------------------------------------
|
61
76
|
// fadeInRight
|
62
77
|
|
63
|
-
@mixin animate-fadeInRight(
|
64
|
-
$
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
78
|
+
@mixin animate-fadeInRight(
|
79
|
+
$class : $default-animation-class-mode,
|
80
|
+
$keyframes : $default-keyframes-output
|
81
|
+
) {
|
82
|
+
$name: fadeInRight;
|
83
|
+
@if $keyframes {
|
84
|
+
@include keyframes($name) {
|
85
|
+
0% {
|
86
|
+
@include translateX(20px);
|
87
|
+
opacity: 0;
|
88
|
+
}
|
89
|
+
100% {
|
90
|
+
@include translateX(0);
|
91
|
+
opacity: 1;
|
92
|
+
}
|
69
93
|
}
|
70
|
-
100% {
|
71
|
-
@include translateX(0);
|
72
|
-
opacity: 1;
|
73
|
-
}
|
74
94
|
}
|
75
95
|
@include animation-class($name, $class) {}
|
76
96
|
}
|
@@ -78,17 +98,22 @@
|
|
78
98
|
// ---------------------------------------------------------------------------
|
79
99
|
// fadeInLeft
|
80
100
|
|
81
|
-
@mixin animate-fadeInLeft(
|
82
|
-
$
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
101
|
+
@mixin animate-fadeInLeft(
|
102
|
+
$class : $default-animation-class-mode,
|
103
|
+
$keyframes : $default-keyframes-output
|
104
|
+
) {
|
105
|
+
$name: fadeInLeft;
|
106
|
+
@if $keyframes {
|
107
|
+
@include keyframes($name) {
|
108
|
+
0% {
|
109
|
+
@include translateX(-20px);
|
110
|
+
opacity: 0;
|
111
|
+
}
|
112
|
+
100% {
|
113
|
+
@include translateX(0);
|
114
|
+
opacity: 1;
|
115
|
+
}
|
87
116
|
}
|
88
|
-
100% {
|
89
|
-
@include translateX(0);
|
90
|
-
opacity: 1;
|
91
|
-
}
|
92
117
|
}
|
93
118
|
@include animation-class($name, $class) {}
|
94
119
|
}
|
@@ -96,17 +121,22 @@
|
|
96
121
|
// ---------------------------------------------------------------------------
|
97
122
|
// fadeInUpBig
|
98
123
|
|
99
|
-
@mixin animate-fadeInUpBig(
|
100
|
-
$
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
124
|
+
@mixin animate-fadeInUpBig(
|
125
|
+
$class : $default-animation-class-mode,
|
126
|
+
$keyframes : $default-keyframes-output
|
127
|
+
) {
|
128
|
+
$name: fadeInUpBig;
|
129
|
+
@if $keyframes {
|
130
|
+
@include keyframes($name) {
|
131
|
+
0% {
|
132
|
+
@include translateY(2000px);
|
133
|
+
opacity: 0;
|
134
|
+
}
|
135
|
+
100% {
|
136
|
+
@include translateY(0);
|
137
|
+
opacity: 1;
|
138
|
+
}
|
105
139
|
}
|
106
|
-
100% {
|
107
|
-
@include translateY(0);
|
108
|
-
opacity: 1;
|
109
|
-
}
|
110
140
|
}
|
111
141
|
@include animation-class($name, $class) {}
|
112
142
|
}
|
@@ -114,17 +144,22 @@
|
|
114
144
|
// ---------------------------------------------------------------------------
|
115
145
|
// fadeInDownBig
|
116
146
|
|
117
|
-
@mixin animate-fadeInDownBig(
|
118
|
-
$
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
147
|
+
@mixin animate-fadeInDownBig(
|
148
|
+
$class : $default-animation-class-mode,
|
149
|
+
$keyframes : $default-keyframes-output
|
150
|
+
) {
|
151
|
+
$name: fadeInDownBig;
|
152
|
+
@if $keyframes {
|
153
|
+
@include keyframes($name) {
|
154
|
+
0% {
|
155
|
+
opacity: 0;
|
156
|
+
@include translateY(-2000px);
|
157
|
+
}
|
158
|
+
100% {
|
159
|
+
opacity: 1;
|
160
|
+
@include translateY(0);
|
161
|
+
}
|
123
162
|
}
|
124
|
-
100% {
|
125
|
-
opacity: 1;
|
126
|
-
@include translateY(0);
|
127
|
-
}
|
128
163
|
}
|
129
164
|
@include animation-class($name, $class) {}
|
130
165
|
}
|
@@ -132,17 +167,22 @@
|
|
132
167
|
// ---------------------------------------------------------------------------
|
133
168
|
// fadeInRightBig
|
134
169
|
|
135
|
-
@mixin animate-fadeInRightBig(
|
136
|
-
$
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
170
|
+
@mixin animate-fadeInRightBig(
|
171
|
+
$class : $default-animation-class-mode,
|
172
|
+
$keyframes : $default-keyframes-output
|
173
|
+
) {
|
174
|
+
$name: fadeInRightBig;
|
175
|
+
@if $keyframes {
|
176
|
+
@include keyframes($name) {
|
177
|
+
0% {
|
178
|
+
opacity: 0;
|
179
|
+
@include translateX(2000px);
|
180
|
+
}
|
181
|
+
100% {
|
182
|
+
opacity: 1;
|
183
|
+
@include translateX(0);
|
184
|
+
}
|
141
185
|
}
|
142
|
-
100% {
|
143
|
-
opacity: 1;
|
144
|
-
@include translateX(0);
|
145
|
-
}
|
146
186
|
}
|
147
187
|
@include animation-class($name, $class) {}
|
148
188
|
}
|
@@ -150,17 +190,22 @@
|
|
150
190
|
// ---------------------------------------------------------------------------
|
151
191
|
// fadeInLeftBig
|
152
192
|
|
153
|
-
@mixin animate-fadeInLeftBig(
|
154
|
-
$
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
193
|
+
@mixin animate-fadeInLeftBig(
|
194
|
+
$class : $default-animation-class-mode,
|
195
|
+
$keyframes : $default-keyframes-output
|
196
|
+
) {
|
197
|
+
$name: fadeInLeftBig;
|
198
|
+
@if $keyframes {
|
199
|
+
@include keyframes($name) {
|
200
|
+
0% {
|
201
|
+
opacity: 0;
|
202
|
+
@include translateX(-2000px);
|
203
|
+
}
|
204
|
+
100% {
|
205
|
+
opacity: 1;
|
206
|
+
@include translateX(0);
|
207
|
+
}
|
159
208
|
}
|
160
|
-
100% {
|
161
|
-
opacity: 1;
|
162
|
-
@include translateX(0);
|
163
|
-
}
|
164
209
|
}
|
165
210
|
@include animation-class($name, $class) {}
|
166
211
|
}
|