@northdata/fomantic-ui 2.8.722 → 2.9.400
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.
- package/lib/semantic-ui/dist/components/accordion.css +62 -69
- package/lib/semantic-ui/dist/components/accordion.js +595 -618
- package/lib/semantic-ui/dist/components/accordion.min.css +4 -4
- package/lib/semantic-ui/dist/components/accordion.min.js +6 -6
- package/lib/semantic-ui/dist/components/api.js +1225 -1177
- package/lib/semantic-ui/dist/components/api.min.js +6 -6
- package/lib/semantic-ui/dist/components/button.css +291 -634
- package/lib/semantic-ui/dist/components/button.min.css +4 -4
- package/lib/semantic-ui/dist/components/calendar.css +149 -33
- package/lib/semantic-ui/dist/components/calendar.js +2045 -1774
- package/lib/semantic-ui/dist/components/calendar.min.css +4 -4
- package/lib/semantic-ui/dist/components/calendar.min.js +6 -6
- package/lib/semantic-ui/dist/components/card.css +147 -537
- package/lib/semantic-ui/dist/components/card.min.css +4 -4
- package/lib/semantic-ui/dist/components/checkbox.css +215 -405
- package/lib/semantic-ui/dist/components/checkbox.js +888 -876
- package/lib/semantic-ui/dist/components/checkbox.min.css +4 -4
- package/lib/semantic-ui/dist/components/checkbox.min.js +6 -6
- package/lib/semantic-ui/dist/components/container.css +20 -21
- package/lib/semantic-ui/dist/components/container.min.css +4 -4
- package/lib/semantic-ui/dist/components/dimmer.css +76 -184
- package/lib/semantic-ui/dist/components/dimmer.js +732 -753
- package/lib/semantic-ui/dist/components/dimmer.min.css +4 -4
- package/lib/semantic-ui/dist/components/dimmer.min.js +6 -6
- package/lib/semantic-ui/dist/components/divider.css +81 -88
- package/lib/semantic-ui/dist/components/divider.min.css +4 -4
- package/lib/semantic-ui/dist/components/dropdown.css +431 -450
- package/lib/semantic-ui/dist/components/dropdown.js +4432 -4238
- package/lib/semantic-ui/dist/components/dropdown.min.css +4 -4
- package/lib/semantic-ui/dist/components/dropdown.min.js +6 -6
- package/lib/semantic-ui/dist/components/feed.css +130 -87
- package/lib/semantic-ui/dist/components/feed.min.css +4 -4
- package/lib/semantic-ui/dist/components/flag.css +541 -511
- package/lib/semantic-ui/dist/components/flag.min.css +4 -4
- package/lib/semantic-ui/dist/components/form.css +437 -476
- package/lib/semantic-ui/dist/components/form.js +2199 -2033
- package/lib/semantic-ui/dist/components/form.min.css +4 -4
- package/lib/semantic-ui/dist/components/form.min.js +6 -6
- package/lib/semantic-ui/dist/components/grid.css +151 -306
- package/lib/semantic-ui/dist/components/grid.min.css +4 -4
- package/lib/semantic-ui/dist/components/header.css +82 -99
- package/lib/semantic-ui/dist/components/header.min.css +4 -4
- package/lib/semantic-ui/dist/components/icon.css +2744 -2706
- package/lib/semantic-ui/dist/components/icon.min.css +4 -4
- package/lib/semantic-ui/dist/components/image.css +38 -73
- package/lib/semantic-ui/dist/components/image.min.css +4 -4
- package/lib/semantic-ui/dist/components/input.css +344 -254
- package/lib/semantic-ui/dist/components/input.min.css +4 -4
- package/lib/semantic-ui/dist/components/item.css +91 -139
- package/lib/semantic-ui/dist/components/item.min.css +4 -4
- package/lib/semantic-ui/dist/components/label.css +244 -267
- package/lib/semantic-ui/dist/components/label.min.css +4 -4
- package/lib/semantic-ui/dist/components/list.css +75 -113
- package/lib/semantic-ui/dist/components/list.min.css +4 -4
- package/lib/semantic-ui/dist/components/loader.css +142 -601
- package/lib/semantic-ui/dist/components/loader.min.css +4 -4
- package/lib/semantic-ui/dist/components/menu.css +398 -638
- package/lib/semantic-ui/dist/components/menu.min.css +9 -1
- package/lib/semantic-ui/dist/components/message.css +116 -332
- package/lib/semantic-ui/dist/components/message.min.css +4 -4
- package/lib/semantic-ui/dist/components/modal.css +149 -138
- package/lib/semantic-ui/dist/components/modal.js +1637 -1209
- package/lib/semantic-ui/dist/components/modal.min.css +4 -4
- package/lib/semantic-ui/dist/components/modal.min.js +6 -6
- package/lib/semantic-ui/dist/components/popup.css +284 -277
- package/lib/semantic-ui/dist/components/popup.js +1561 -1541
- package/lib/semantic-ui/dist/components/popup.min.css +4 -4
- package/lib/semantic-ui/dist/components/popup.min.js +6 -6
- package/lib/semantic-ui/dist/components/reset.css +12 -17
- package/lib/semantic-ui/dist/components/reset.min.css +4 -4
- package/lib/semantic-ui/dist/components/search.css +99 -137
- package/lib/semantic-ui/dist/components/search.js +1641 -1565
- package/lib/semantic-ui/dist/components/search.min.css +4 -4
- package/lib/semantic-ui/dist/components/search.min.js +6 -6
- package/lib/semantic-ui/dist/components/segment.css +149 -275
- package/lib/semantic-ui/dist/components/segment.min.css +4 -4
- package/lib/semantic-ui/dist/components/site.css +40 -48
- package/lib/semantic-ui/dist/components/site.js +455 -493
- package/lib/semantic-ui/dist/components/site.min.css +4 -4
- package/lib/semantic-ui/dist/components/site.min.js +6 -6
- package/lib/semantic-ui/dist/components/tab.css +16 -20
- package/lib/semantic-ui/dist/components/tab.js +967 -1001
- package/lib/semantic-ui/dist/components/tab.min.css +4 -4
- package/lib/semantic-ui/dist/components/tab.min.js +6 -6
- package/lib/semantic-ui/dist/components/table.css +465 -424
- package/lib/semantic-ui/dist/components/table.min.css +4 -4
- package/lib/semantic-ui/dist/components/transition.css +264 -1282
- package/lib/semantic-ui/dist/components/transition.js +1034 -1109
- package/lib/semantic-ui/dist/components/transition.min.css +4 -4
- package/lib/semantic-ui/dist/components/transition.min.js +6 -6
- package/lib/semantic-ui/dist/semantic-packed.css +5619 -6592
- package/lib/semantic-ui/dist/semantic.css +8547 -11697
- package/lib/semantic-ui/dist/semantic.full.css +14698 -11227
- package/lib/semantic-ui/dist/semantic.full.min.css +6 -262
- package/lib/semantic-ui/dist/semantic.js +19428 -19253
- package/lib/semantic-ui/dist/semantic.min.css +128 -128
- package/lib/semantic-ui/dist/semantic.min.js +6 -6
- package/lib/semantic-ui/dist/themes/basic/assets/fonts/LICENSE.txt +91 -0
- package/lib/semantic-ui/dist/themes/basic/assets/fonts/icons.woff2 +0 -0
- package/lib/semantic-ui/dist/themes/default/assets/fonts/LICENSE_icons.txt +165 -0
- package/lib/semantic-ui/dist/themes/default/assets/fonts/brand-icons.woff +0 -0
- package/lib/semantic-ui/dist/themes/default/assets/fonts/brand-icons.woff2 +0 -0
- package/lib/semantic-ui/dist/themes/default/assets/fonts/icons.woff +0 -0
- package/lib/semantic-ui/dist/themes/default/assets/fonts/icons.woff2 +0 -0
- package/lib/semantic-ui/dist/themes/default/assets/fonts/outline-icons.woff +0 -0
- package/lib/semantic-ui/dist/themes/default/assets/fonts/outline-icons.woff2 +0 -0
- package/package.json +17 -7
- package/lib/semantic-ui/dist/components/shape.css +0 -160
- package/lib/semantic-ui/dist/components/shape.js +0 -848
- package/lib/semantic-ui/dist/components/shape.min.css +0 -9
- package/lib/semantic-ui/dist/components/shape.min.js +0 -11
- package/lib/semantic-ui/dist/themes/basic/assets/fonts/icons.eot +0 -0
- package/lib/semantic-ui/dist/themes/basic/assets/fonts/icons.svg +0 -450
- package/lib/semantic-ui/dist/themes/basic/assets/fonts/icons.ttf +0 -0
- package/lib/semantic-ui/dist/themes/default/assets/fonts/brand-icons.eot +0 -0
- package/lib/semantic-ui/dist/themes/default/assets/fonts/brand-icons.svg +0 -3570
- package/lib/semantic-ui/dist/themes/default/assets/fonts/brand-icons.ttf +0 -0
- package/lib/semantic-ui/dist/themes/default/assets/fonts/icons.eot +0 -0
- package/lib/semantic-ui/dist/themes/default/assets/fonts/icons.svg +0 -4938
- package/lib/semantic-ui/dist/themes/default/assets/fonts/icons.ttf +0 -0
- package/lib/semantic-ui/dist/themes/default/assets/fonts/outline-icons.eot +0 -0
- package/lib/semantic-ui/dist/themes/default/assets/fonts/outline-icons.svg +0 -803
- package/lib/semantic-ui/dist/themes/default/assets/fonts/outline-icons.ttf +0 -0
- package/lib/semantic-ui/dist/themes/github/assets/fonts/octicons-local.ttf +0 -0
- package/lib/semantic-ui/dist/themes/github/assets/fonts/octicons.svg +0 -200
- package/lib/semantic-ui/dist/themes/github/assets/fonts/octicons.ttf +0 -0
- package/lib/semantic-ui/dist/themes/github/assets/fonts/octicons.woff +0 -0
- package/lib/semantic-ui/dist/themes/material/assets/fonts/icons.eot +0 -0
- package/lib/semantic-ui/dist/themes/material/assets/fonts/icons.svg +0 -2373
- package/lib/semantic-ui/dist/themes/material/assets/fonts/icons.ttf +0 -0
- package/lib/semantic-ui/dist/themes/material/assets/fonts/icons.woff +0 -0
- package/lib/semantic-ui/dist/themes/material/assets/fonts/icons.woff2 +0 -0
- /package/lib/semantic-ui/dist/themes/{default → famfamfam}/assets/images/flags.png +0 -0
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* # Fomantic-UI - Transition
|
|
3
|
-
*
|
|
2
|
+
* # Fomantic-UI 2.9.4 - Transition
|
|
3
|
+
* https://github.com/fomantic/Fomantic-UI/
|
|
4
4
|
*
|
|
5
5
|
*
|
|
6
6
|
* Released under the MIT license
|
|
7
|
-
*
|
|
7
|
+
* https://opensource.org/licenses/MIT
|
|
8
8
|
*
|
|
9
9
|
*/
|
|
10
10
|
|
|
@@ -14,14 +14,10 @@
|
|
|
14
14
|
*******************************/
|
|
15
15
|
|
|
16
16
|
.transition {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
-
|
|
20
|
-
|
|
21
|
-
-webkit-animation-timing-function: ease;
|
|
22
|
-
animation-timing-function: ease;
|
|
23
|
-
-webkit-animation-fill-mode: both;
|
|
24
|
-
animation-fill-mode: both;
|
|
17
|
+
animation-iteration-count: 1;
|
|
18
|
+
animation-duration: 300ms;
|
|
19
|
+
animation-timing-function: ease;
|
|
20
|
+
animation-fill-mode: both;
|
|
25
21
|
}
|
|
26
22
|
|
|
27
23
|
|
|
@@ -55,8 +51,8 @@
|
|
|
55
51
|
display: block !important;
|
|
56
52
|
visibility: visible !important;
|
|
57
53
|
|
|
58
|
-
/*
|
|
59
|
-
|
|
54
|
+
/* backface-visibility: @backfaceVisibility;
|
|
55
|
+
transform: @use3DAcceleration; */
|
|
60
56
|
}
|
|
61
57
|
|
|
62
58
|
|
|
@@ -64,10 +60,6 @@
|
|
|
64
60
|
Variations
|
|
65
61
|
*******************************/
|
|
66
62
|
|
|
67
|
-
.looping.transition {
|
|
68
|
-
-webkit-animation-iteration-count: infinite;
|
|
69
|
-
animation-iteration-count: infinite;
|
|
70
|
-
}
|
|
71
63
|
|
|
72
64
|
|
|
73
65
|
/*******************************
|
|
@@ -82,288 +74,155 @@
|
|
|
82
74
|
by Nick Pettit - https://github.com/nickpettit/glide
|
|
83
75
|
*/
|
|
84
76
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
77
|
+
/* --------------
|
|
78
|
+
Browse
|
|
79
|
+
--------------- */
|
|
89
80
|
.transition.browse {
|
|
90
|
-
|
|
91
|
-
animation-duration: 500ms;
|
|
81
|
+
animation-duration: 500ms;
|
|
92
82
|
}
|
|
93
83
|
.transition.browse.in {
|
|
94
|
-
|
|
95
|
-
animation-name: browseIn;
|
|
84
|
+
animation-name: browseIn;
|
|
96
85
|
}
|
|
97
86
|
.transition.browse.out,
|
|
98
87
|
.transition.browse.left.out {
|
|
99
|
-
|
|
100
|
-
animation-name: browseOutLeft;
|
|
88
|
+
animation-name: browseOutLeft;
|
|
101
89
|
}
|
|
102
90
|
.transition.browse.right.out {
|
|
103
|
-
|
|
104
|
-
animation-name: browseOutRight;
|
|
91
|
+
animation-name: browseOutRight;
|
|
105
92
|
}
|
|
93
|
+
|
|
106
94
|
/* In */
|
|
107
|
-
@-webkit-keyframes browseIn {
|
|
108
|
-
0% {
|
|
109
|
-
-webkit-transform: scale(0.8) translateZ(0px);
|
|
110
|
-
transform: scale(0.8) translateZ(0px);
|
|
111
|
-
z-index: -1;
|
|
112
|
-
}
|
|
113
|
-
10% {
|
|
114
|
-
-webkit-transform: scale(0.8) translateZ(0px);
|
|
115
|
-
transform: scale(0.8) translateZ(0px);
|
|
116
|
-
z-index: -1;
|
|
117
|
-
opacity: 0.7;
|
|
118
|
-
}
|
|
119
|
-
80% {
|
|
120
|
-
-webkit-transform: scale(1.05) translateZ(0px);
|
|
121
|
-
transform: scale(1.05) translateZ(0px);
|
|
122
|
-
opacity: 1;
|
|
123
|
-
z-index: 999;
|
|
124
|
-
}
|
|
125
|
-
100% {
|
|
126
|
-
-webkit-transform: scale(1) translateZ(0px);
|
|
127
|
-
transform: scale(1) translateZ(0px);
|
|
128
|
-
z-index: 999;
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
95
|
@keyframes browseIn {
|
|
132
96
|
0% {
|
|
133
|
-
|
|
134
|
-
transform: scale(0.8) translateZ(0px);
|
|
97
|
+
transform: scale(0.8) translateZ(0);
|
|
135
98
|
z-index: -1;
|
|
136
99
|
}
|
|
137
100
|
10% {
|
|
138
|
-
|
|
139
|
-
transform: scale(0.8) translateZ(0px);
|
|
101
|
+
transform: scale(0.8) translateZ(0);
|
|
140
102
|
z-index: -1;
|
|
141
103
|
opacity: 0.7;
|
|
142
104
|
}
|
|
143
105
|
80% {
|
|
144
|
-
|
|
145
|
-
transform: scale(1.05) translateZ(0px);
|
|
106
|
+
transform: scale(1.05) translateZ(0);
|
|
146
107
|
opacity: 1;
|
|
147
108
|
z-index: 999;
|
|
148
109
|
}
|
|
149
110
|
100% {
|
|
150
|
-
|
|
151
|
-
transform: scale(1) translateZ(0px);
|
|
111
|
+
transform: scale(1) translateZ(0);
|
|
152
112
|
z-index: 999;
|
|
153
113
|
}
|
|
154
114
|
}
|
|
155
115
|
|
|
156
116
|
/* Out */
|
|
157
|
-
@-webkit-keyframes browseOutLeft {
|
|
158
|
-
0% {
|
|
159
|
-
z-index: 999;
|
|
160
|
-
-webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
|
|
161
|
-
transform: translateX(0%) rotateY(0deg) rotateX(0deg);
|
|
162
|
-
}
|
|
163
|
-
50% {
|
|
164
|
-
z-index: -1;
|
|
165
|
-
-webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
|
|
166
|
-
transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
|
|
167
|
-
}
|
|
168
|
-
80% {
|
|
169
|
-
opacity: 1;
|
|
170
|
-
}
|
|
171
|
-
100% {
|
|
172
|
-
z-index: -1;
|
|
173
|
-
-webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
|
|
174
|
-
transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
|
|
175
|
-
opacity: 0;
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
117
|
@keyframes browseOutLeft {
|
|
179
118
|
0% {
|
|
180
119
|
z-index: 999;
|
|
181
|
-
|
|
182
|
-
transform: translateX(0%) rotateY(0deg) rotateX(0deg);
|
|
120
|
+
transform: translateX(0) rotateY(0) rotateX(0);
|
|
183
121
|
}
|
|
184
122
|
50% {
|
|
185
123
|
z-index: -1;
|
|
186
|
-
|
|
187
|
-
transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
|
|
124
|
+
transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
|
|
188
125
|
}
|
|
189
126
|
80% {
|
|
190
127
|
opacity: 1;
|
|
191
128
|
}
|
|
192
129
|
100% {
|
|
193
130
|
z-index: -1;
|
|
194
|
-
|
|
195
|
-
transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
|
|
196
|
-
opacity: 0;
|
|
197
|
-
}
|
|
198
|
-
}
|
|
199
|
-
@-webkit-keyframes browseOutRight {
|
|
200
|
-
0% {
|
|
201
|
-
z-index: 999;
|
|
202
|
-
-webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
|
|
203
|
-
transform: translateX(0%) rotateY(0deg) rotateX(0deg);
|
|
204
|
-
}
|
|
205
|
-
50% {
|
|
206
|
-
z-index: 1;
|
|
207
|
-
-webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
|
|
208
|
-
transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
|
|
209
|
-
}
|
|
210
|
-
80% {
|
|
211
|
-
opacity: 1;
|
|
212
|
-
}
|
|
213
|
-
100% {
|
|
214
|
-
z-index: 1;
|
|
215
|
-
-webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
|
|
216
|
-
transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
|
|
131
|
+
transform: translateX(0) rotateY(0) rotateX(0) translateZ(-10px);
|
|
217
132
|
opacity: 0;
|
|
218
133
|
}
|
|
219
134
|
}
|
|
220
135
|
@keyframes browseOutRight {
|
|
221
136
|
0% {
|
|
222
137
|
z-index: 999;
|
|
223
|
-
|
|
224
|
-
transform: translateX(0%) rotateY(0deg) rotateX(0deg);
|
|
138
|
+
transform: translateX(0) rotateY(0) rotateX(0);
|
|
225
139
|
}
|
|
226
140
|
50% {
|
|
227
141
|
z-index: 1;
|
|
228
|
-
|
|
229
|
-
transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
|
|
142
|
+
transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
|
|
230
143
|
}
|
|
231
144
|
80% {
|
|
232
145
|
opacity: 1;
|
|
233
146
|
}
|
|
234
147
|
100% {
|
|
235
148
|
z-index: 1;
|
|
236
|
-
|
|
237
|
-
transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
|
|
149
|
+
transform: translateX(0) rotateY(0) rotateX(0) translateZ(-10px);
|
|
238
150
|
opacity: 0;
|
|
239
151
|
}
|
|
240
152
|
}
|
|
241
153
|
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
154
|
+
/* --------------
|
|
155
|
+
Drop
|
|
156
|
+
--------------- */
|
|
246
157
|
.drop.transition {
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
-
|
|
250
|
-
animation-duration: 400ms;
|
|
251
|
-
-webkit-animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
|
|
252
|
-
animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
|
|
158
|
+
transform-origin: top center;
|
|
159
|
+
animation-duration: 400ms;
|
|
160
|
+
animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
|
|
253
161
|
}
|
|
254
162
|
.drop.transition.in {
|
|
255
|
-
|
|
256
|
-
animation-name: dropIn;
|
|
163
|
+
animation-name: dropIn;
|
|
257
164
|
}
|
|
258
165
|
.drop.transition.out {
|
|
259
|
-
|
|
260
|
-
animation-name: dropOut;
|
|
166
|
+
animation-name: dropOut;
|
|
261
167
|
}
|
|
262
168
|
|
|
263
169
|
/* Drop */
|
|
264
|
-
@-webkit-keyframes dropIn {
|
|
265
|
-
0% {
|
|
266
|
-
opacity: 0;
|
|
267
|
-
-webkit-transform: scale(0);
|
|
268
|
-
transform: scale(0);
|
|
269
|
-
}
|
|
270
|
-
100% {
|
|
271
|
-
opacity: 1;
|
|
272
|
-
-webkit-transform: scale(1);
|
|
273
|
-
transform: scale(1);
|
|
274
|
-
}
|
|
275
|
-
}
|
|
276
170
|
@keyframes dropIn {
|
|
277
171
|
0% {
|
|
278
172
|
opacity: 0;
|
|
279
|
-
|
|
280
|
-
transform: scale(0);
|
|
173
|
+
transform: scale(0);
|
|
281
174
|
}
|
|
282
175
|
100% {
|
|
283
176
|
opacity: 1;
|
|
284
|
-
|
|
285
|
-
transform: scale(1);
|
|
286
|
-
}
|
|
287
|
-
}
|
|
288
|
-
@-webkit-keyframes dropOut {
|
|
289
|
-
0% {
|
|
290
|
-
opacity: 1;
|
|
291
|
-
-webkit-transform: scale(1);
|
|
292
|
-
transform: scale(1);
|
|
293
|
-
}
|
|
294
|
-
100% {
|
|
295
|
-
opacity: 0;
|
|
296
|
-
-webkit-transform: scale(0);
|
|
297
|
-
transform: scale(0);
|
|
177
|
+
transform: scale(1);
|
|
298
178
|
}
|
|
299
179
|
}
|
|
300
180
|
@keyframes dropOut {
|
|
301
181
|
0% {
|
|
302
182
|
opacity: 1;
|
|
303
|
-
|
|
304
|
-
transform: scale(1);
|
|
183
|
+
transform: scale(1);
|
|
305
184
|
}
|
|
306
185
|
100% {
|
|
307
186
|
opacity: 0;
|
|
308
|
-
|
|
309
|
-
transform: scale(0);
|
|
187
|
+
transform: scale(0);
|
|
310
188
|
}
|
|
311
189
|
}
|
|
312
190
|
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
191
|
+
/* --------------
|
|
192
|
+
Fade
|
|
193
|
+
--------------- */
|
|
317
194
|
.transition.fade.in {
|
|
318
|
-
|
|
319
|
-
animation-name: fadeIn;
|
|
195
|
+
animation-name: fadeIn;
|
|
320
196
|
}
|
|
321
197
|
.transition[class*="fade up"].in {
|
|
322
|
-
|
|
323
|
-
animation-name: fadeInUp;
|
|
198
|
+
animation-name: fadeInUp;
|
|
324
199
|
}
|
|
325
200
|
.transition[class*="fade down"].in {
|
|
326
|
-
|
|
327
|
-
animation-name: fadeInDown;
|
|
201
|
+
animation-name: fadeInDown;
|
|
328
202
|
}
|
|
329
203
|
.transition[class*="fade left"].in {
|
|
330
|
-
|
|
331
|
-
animation-name: fadeInLeft;
|
|
204
|
+
animation-name: fadeInLeft;
|
|
332
205
|
}
|
|
333
206
|
.transition[class*="fade right"].in {
|
|
334
|
-
|
|
335
|
-
animation-name: fadeInRight;
|
|
207
|
+
animation-name: fadeInRight;
|
|
336
208
|
}
|
|
337
209
|
.transition.fade.out {
|
|
338
|
-
|
|
339
|
-
animation-name: fadeOut;
|
|
210
|
+
animation-name: fadeOut;
|
|
340
211
|
}
|
|
341
212
|
.transition[class*="fade up"].out {
|
|
342
|
-
|
|
343
|
-
animation-name: fadeOutUp;
|
|
213
|
+
animation-name: fadeOutUp;
|
|
344
214
|
}
|
|
345
215
|
.transition[class*="fade down"].out {
|
|
346
|
-
|
|
347
|
-
animation-name: fadeOutDown;
|
|
216
|
+
animation-name: fadeOutDown;
|
|
348
217
|
}
|
|
349
218
|
.transition[class*="fade left"].out {
|
|
350
|
-
|
|
351
|
-
animation-name: fadeOutLeft;
|
|
219
|
+
animation-name: fadeOutLeft;
|
|
352
220
|
}
|
|
353
221
|
.transition[class*="fade right"].out {
|
|
354
|
-
|
|
355
|
-
animation-name: fadeOutRight;
|
|
222
|
+
animation-name: fadeOutRight;
|
|
356
223
|
}
|
|
357
224
|
|
|
358
225
|
/* In */
|
|
359
|
-
@-webkit-keyframes fadeIn {
|
|
360
|
-
0% {
|
|
361
|
-
opacity: 0;
|
|
362
|
-
}
|
|
363
|
-
100% {
|
|
364
|
-
opacity: 1;
|
|
365
|
-
}
|
|
366
|
-
}
|
|
367
226
|
@keyframes fadeIn {
|
|
368
227
|
0% {
|
|
369
228
|
opacity: 0;
|
|
@@ -372,112 +231,48 @@
|
|
|
372
231
|
opacity: 1;
|
|
373
232
|
}
|
|
374
233
|
}
|
|
375
|
-
@-webkit-keyframes fadeInUp {
|
|
376
|
-
0% {
|
|
377
|
-
opacity: 0;
|
|
378
|
-
-webkit-transform: translateY(10%);
|
|
379
|
-
transform: translateY(10%);
|
|
380
|
-
}
|
|
381
|
-
100% {
|
|
382
|
-
opacity: 1;
|
|
383
|
-
-webkit-transform: translateY(0%);
|
|
384
|
-
transform: translateY(0%);
|
|
385
|
-
}
|
|
386
|
-
}
|
|
387
234
|
@keyframes fadeInUp {
|
|
388
235
|
0% {
|
|
389
236
|
opacity: 0;
|
|
390
|
-
|
|
391
|
-
transform: translateY(10%);
|
|
237
|
+
transform: translateY(10%);
|
|
392
238
|
}
|
|
393
239
|
100% {
|
|
394
240
|
opacity: 1;
|
|
395
|
-
|
|
396
|
-
transform: translateY(0%);
|
|
397
|
-
}
|
|
398
|
-
}
|
|
399
|
-
@-webkit-keyframes fadeInDown {
|
|
400
|
-
0% {
|
|
401
|
-
opacity: 0;
|
|
402
|
-
-webkit-transform: translateY(-10%);
|
|
403
|
-
transform: translateY(-10%);
|
|
404
|
-
}
|
|
405
|
-
100% {
|
|
406
|
-
opacity: 1;
|
|
407
|
-
-webkit-transform: translateY(0%);
|
|
408
|
-
transform: translateY(0%);
|
|
241
|
+
transform: translateY(0);
|
|
409
242
|
}
|
|
410
243
|
}
|
|
411
244
|
@keyframes fadeInDown {
|
|
412
245
|
0% {
|
|
413
246
|
opacity: 0;
|
|
414
|
-
|
|
415
|
-
transform: translateY(-10%);
|
|
247
|
+
transform: translateY(-10%);
|
|
416
248
|
}
|
|
417
249
|
100% {
|
|
418
250
|
opacity: 1;
|
|
419
|
-
|
|
420
|
-
transform: translateY(0%);
|
|
421
|
-
}
|
|
422
|
-
}
|
|
423
|
-
@-webkit-keyframes fadeInLeft {
|
|
424
|
-
0% {
|
|
425
|
-
opacity: 0;
|
|
426
|
-
-webkit-transform: translateX(10%);
|
|
427
|
-
transform: translateX(10%);
|
|
428
|
-
}
|
|
429
|
-
100% {
|
|
430
|
-
opacity: 1;
|
|
431
|
-
-webkit-transform: translateX(0%);
|
|
432
|
-
transform: translateX(0%);
|
|
251
|
+
transform: translateY(0);
|
|
433
252
|
}
|
|
434
253
|
}
|
|
435
254
|
@keyframes fadeInLeft {
|
|
436
255
|
0% {
|
|
437
256
|
opacity: 0;
|
|
438
|
-
|
|
439
|
-
transform: translateX(10%);
|
|
440
|
-
}
|
|
441
|
-
100% {
|
|
442
|
-
opacity: 1;
|
|
443
|
-
-webkit-transform: translateX(0%);
|
|
444
|
-
transform: translateX(0%);
|
|
445
|
-
}
|
|
446
|
-
}
|
|
447
|
-
@-webkit-keyframes fadeInRight {
|
|
448
|
-
0% {
|
|
449
|
-
opacity: 0;
|
|
450
|
-
-webkit-transform: translateX(-10%);
|
|
451
|
-
transform: translateX(-10%);
|
|
257
|
+
transform: translateX(10%);
|
|
452
258
|
}
|
|
453
259
|
100% {
|
|
454
260
|
opacity: 1;
|
|
455
|
-
|
|
456
|
-
transform: translateX(0%);
|
|
261
|
+
transform: translateX(0);
|
|
457
262
|
}
|
|
458
263
|
}
|
|
459
264
|
@keyframes fadeInRight {
|
|
460
265
|
0% {
|
|
461
266
|
opacity: 0;
|
|
462
|
-
|
|
463
|
-
transform: translateX(-10%);
|
|
267
|
+
transform: translateX(-10%);
|
|
464
268
|
}
|
|
465
269
|
100% {
|
|
466
270
|
opacity: 1;
|
|
467
|
-
|
|
468
|
-
transform: translateX(0%);
|
|
271
|
+
transform: translateX(0);
|
|
469
272
|
}
|
|
470
273
|
}
|
|
471
274
|
|
|
472
275
|
/* Out */
|
|
473
|
-
@-webkit-keyframes fadeOut {
|
|
474
|
-
0% {
|
|
475
|
-
opacity: 1;
|
|
476
|
-
}
|
|
477
|
-
100% {
|
|
478
|
-
opacity: 0;
|
|
479
|
-
}
|
|
480
|
-
}
|
|
481
276
|
@keyframes fadeOut {
|
|
482
277
|
0% {
|
|
483
278
|
opacity: 1;
|
|
@@ -486,1218 +281,579 @@
|
|
|
486
281
|
opacity: 0;
|
|
487
282
|
}
|
|
488
283
|
}
|
|
489
|
-
@-webkit-keyframes fadeOutUp {
|
|
490
|
-
0% {
|
|
491
|
-
opacity: 1;
|
|
492
|
-
-webkit-transform: translateY(0%);
|
|
493
|
-
transform: translateY(0%);
|
|
494
|
-
}
|
|
495
|
-
100% {
|
|
496
|
-
opacity: 0;
|
|
497
|
-
-webkit-transform: translateY(5%);
|
|
498
|
-
transform: translateY(5%);
|
|
499
|
-
}
|
|
500
|
-
}
|
|
501
284
|
@keyframes fadeOutUp {
|
|
502
285
|
0% {
|
|
503
286
|
opacity: 1;
|
|
504
|
-
|
|
505
|
-
transform: translateY(0%);
|
|
506
|
-
}
|
|
507
|
-
100% {
|
|
508
|
-
opacity: 0;
|
|
509
|
-
-webkit-transform: translateY(5%);
|
|
510
|
-
transform: translateY(5%);
|
|
511
|
-
}
|
|
512
|
-
}
|
|
513
|
-
@-webkit-keyframes fadeOutDown {
|
|
514
|
-
0% {
|
|
515
|
-
opacity: 1;
|
|
516
|
-
-webkit-transform: translateY(0%);
|
|
517
|
-
transform: translateY(0%);
|
|
287
|
+
transform: translateY(0);
|
|
518
288
|
}
|
|
519
289
|
100% {
|
|
520
290
|
opacity: 0;
|
|
521
|
-
|
|
522
|
-
transform: translateY(-5%);
|
|
291
|
+
transform: translateY(5%);
|
|
523
292
|
}
|
|
524
293
|
}
|
|
525
294
|
@keyframes fadeOutDown {
|
|
526
295
|
0% {
|
|
527
296
|
opacity: 1;
|
|
528
|
-
|
|
529
|
-
transform: translateY(0%);
|
|
297
|
+
transform: translateY(0);
|
|
530
298
|
}
|
|
531
299
|
100% {
|
|
532
300
|
opacity: 0;
|
|
533
|
-
|
|
534
|
-
transform: translateY(-5%);
|
|
535
|
-
}
|
|
536
|
-
}
|
|
537
|
-
@-webkit-keyframes fadeOutLeft {
|
|
538
|
-
0% {
|
|
539
|
-
opacity: 1;
|
|
540
|
-
-webkit-transform: translateX(0%);
|
|
541
|
-
transform: translateX(0%);
|
|
542
|
-
}
|
|
543
|
-
100% {
|
|
544
|
-
opacity: 0;
|
|
545
|
-
-webkit-transform: translateX(5%);
|
|
546
|
-
transform: translateX(5%);
|
|
301
|
+
transform: translateY(-5%);
|
|
547
302
|
}
|
|
548
303
|
}
|
|
549
304
|
@keyframes fadeOutLeft {
|
|
550
305
|
0% {
|
|
551
306
|
opacity: 1;
|
|
552
|
-
|
|
553
|
-
transform: translateX(0%);
|
|
307
|
+
transform: translateX(0);
|
|
554
308
|
}
|
|
555
309
|
100% {
|
|
556
310
|
opacity: 0;
|
|
557
|
-
|
|
558
|
-
transform: translateX(5%);
|
|
559
|
-
}
|
|
560
|
-
}
|
|
561
|
-
@-webkit-keyframes fadeOutRight {
|
|
562
|
-
0% {
|
|
563
|
-
opacity: 1;
|
|
564
|
-
-webkit-transform: translateX(0%);
|
|
565
|
-
transform: translateX(0%);
|
|
566
|
-
}
|
|
567
|
-
100% {
|
|
568
|
-
opacity: 0;
|
|
569
|
-
-webkit-transform: translateX(-5%);
|
|
570
|
-
transform: translateX(-5%);
|
|
311
|
+
transform: translateX(5%);
|
|
571
312
|
}
|
|
572
313
|
}
|
|
573
314
|
@keyframes fadeOutRight {
|
|
574
315
|
0% {
|
|
575
316
|
opacity: 1;
|
|
576
|
-
|
|
577
|
-
transform: translateX(0%);
|
|
317
|
+
transform: translateX(0);
|
|
578
318
|
}
|
|
579
319
|
100% {
|
|
580
320
|
opacity: 0;
|
|
581
|
-
|
|
582
|
-
transform: translateX(-5%);
|
|
321
|
+
transform: translateX(-5%);
|
|
583
322
|
}
|
|
584
323
|
}
|
|
585
324
|
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
325
|
+
/* --------------
|
|
326
|
+
Flips
|
|
327
|
+
--------------- */
|
|
590
328
|
.flip.transition.in,
|
|
591
329
|
.flip.transition.out {
|
|
592
|
-
|
|
593
|
-
animation-duration: 600ms;
|
|
330
|
+
animation-duration: 600ms;
|
|
594
331
|
}
|
|
595
332
|
.horizontal.flip.transition.in {
|
|
596
|
-
|
|
597
|
-
animation-name: horizontalFlipIn;
|
|
333
|
+
animation-name: horizontalFlipIn;
|
|
598
334
|
}
|
|
599
335
|
.horizontal.flip.transition.out {
|
|
600
|
-
|
|
601
|
-
animation-name: horizontalFlipOut;
|
|
336
|
+
animation-name: horizontalFlipOut;
|
|
602
337
|
}
|
|
603
338
|
.vertical.flip.transition.in {
|
|
604
|
-
|
|
605
|
-
animation-name: verticalFlipIn;
|
|
339
|
+
animation-name: verticalFlipIn;
|
|
606
340
|
}
|
|
607
341
|
.vertical.flip.transition.out {
|
|
608
|
-
|
|
609
|
-
animation-name: verticalFlipOut;
|
|
342
|
+
animation-name: verticalFlipOut;
|
|
610
343
|
}
|
|
611
344
|
|
|
612
345
|
/* In */
|
|
613
|
-
@-webkit-keyframes horizontalFlipIn {
|
|
614
|
-
0% {
|
|
615
|
-
-webkit-transform: perspective(2000px) rotateY(-90deg);
|
|
616
|
-
transform: perspective(2000px) rotateY(-90deg);
|
|
617
|
-
opacity: 0;
|
|
618
|
-
}
|
|
619
|
-
100% {
|
|
620
|
-
-webkit-transform: perspective(2000px) rotateY(0deg);
|
|
621
|
-
transform: perspective(2000px) rotateY(0deg);
|
|
622
|
-
opacity: 1;
|
|
623
|
-
}
|
|
624
|
-
}
|
|
625
346
|
@keyframes horizontalFlipIn {
|
|
626
347
|
0% {
|
|
627
|
-
|
|
628
|
-
transform: perspective(2000px) rotateY(-90deg);
|
|
348
|
+
transform: perspective(2000px) rotateY(-90deg);
|
|
629
349
|
opacity: 0;
|
|
630
350
|
}
|
|
631
351
|
100% {
|
|
632
|
-
|
|
633
|
-
transform: perspective(2000px) rotateY(0deg);
|
|
634
|
-
opacity: 1;
|
|
635
|
-
}
|
|
636
|
-
}
|
|
637
|
-
@-webkit-keyframes verticalFlipIn {
|
|
638
|
-
0% {
|
|
639
|
-
-webkit-transform: perspective(2000px) rotateX(-90deg);
|
|
640
|
-
transform: perspective(2000px) rotateX(-90deg);
|
|
641
|
-
opacity: 0;
|
|
642
|
-
}
|
|
643
|
-
100% {
|
|
644
|
-
-webkit-transform: perspective(2000px) rotateX(0deg);
|
|
645
|
-
transform: perspective(2000px) rotateX(0deg);
|
|
352
|
+
transform: perspective(2000px) rotateY(0);
|
|
646
353
|
opacity: 1;
|
|
647
354
|
}
|
|
648
355
|
}
|
|
649
356
|
@keyframes verticalFlipIn {
|
|
650
357
|
0% {
|
|
651
|
-
|
|
652
|
-
transform: perspective(2000px) rotateX(-90deg);
|
|
358
|
+
transform: perspective(2000px) rotateX(-90deg);
|
|
653
359
|
opacity: 0;
|
|
654
360
|
}
|
|
655
361
|
100% {
|
|
656
|
-
|
|
657
|
-
transform: perspective(2000px) rotateX(0deg);
|
|
362
|
+
transform: perspective(2000px) rotateX(0);
|
|
658
363
|
opacity: 1;
|
|
659
364
|
}
|
|
660
365
|
}
|
|
661
366
|
|
|
662
367
|
/* Out */
|
|
663
|
-
@-webkit-keyframes horizontalFlipOut {
|
|
664
|
-
0% {
|
|
665
|
-
-webkit-transform: perspective(2000px) rotateY(0deg);
|
|
666
|
-
transform: perspective(2000px) rotateY(0deg);
|
|
667
|
-
opacity: 1;
|
|
668
|
-
}
|
|
669
|
-
100% {
|
|
670
|
-
-webkit-transform: perspective(2000px) rotateY(90deg);
|
|
671
|
-
transform: perspective(2000px) rotateY(90deg);
|
|
672
|
-
opacity: 0;
|
|
673
|
-
}
|
|
674
|
-
}
|
|
675
368
|
@keyframes horizontalFlipOut {
|
|
676
369
|
0% {
|
|
677
|
-
|
|
678
|
-
transform: perspective(2000px) rotateY(0deg);
|
|
370
|
+
transform: perspective(2000px) rotateY(0);
|
|
679
371
|
opacity: 1;
|
|
680
372
|
}
|
|
681
373
|
100% {
|
|
682
|
-
|
|
683
|
-
transform: perspective(2000px) rotateY(90deg);
|
|
684
|
-
opacity: 0;
|
|
685
|
-
}
|
|
686
|
-
}
|
|
687
|
-
@-webkit-keyframes verticalFlipOut {
|
|
688
|
-
0% {
|
|
689
|
-
-webkit-transform: perspective(2000px) rotateX(0deg);
|
|
690
|
-
transform: perspective(2000px) rotateX(0deg);
|
|
691
|
-
opacity: 1;
|
|
692
|
-
}
|
|
693
|
-
100% {
|
|
694
|
-
-webkit-transform: perspective(2000px) rotateX(-90deg);
|
|
695
|
-
transform: perspective(2000px) rotateX(-90deg);
|
|
374
|
+
transform: perspective(2000px) rotateY(90deg);
|
|
696
375
|
opacity: 0;
|
|
697
376
|
}
|
|
698
377
|
}
|
|
699
378
|
@keyframes verticalFlipOut {
|
|
700
379
|
0% {
|
|
701
|
-
|
|
702
|
-
transform: perspective(2000px) rotateX(0deg);
|
|
380
|
+
transform: perspective(2000px) rotateX(0);
|
|
703
381
|
opacity: 1;
|
|
704
382
|
}
|
|
705
383
|
100% {
|
|
706
|
-
|
|
707
|
-
transform: perspective(2000px) rotateX(-90deg);
|
|
384
|
+
transform: perspective(2000px) rotateX(-90deg);
|
|
708
385
|
opacity: 0;
|
|
709
386
|
}
|
|
710
387
|
}
|
|
711
388
|
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
389
|
+
/* --------------
|
|
390
|
+
Scale
|
|
391
|
+
--------------- */
|
|
716
392
|
.scale.transition.in {
|
|
717
|
-
|
|
718
|
-
animation-name: scaleIn;
|
|
393
|
+
animation-name: scaleIn;
|
|
719
394
|
}
|
|
720
395
|
.scale.transition.out {
|
|
721
|
-
|
|
722
|
-
animation-name: scaleOut;
|
|
723
|
-
}
|
|
724
|
-
@-webkit-keyframes scaleIn {
|
|
725
|
-
0% {
|
|
726
|
-
opacity: 0;
|
|
727
|
-
-webkit-transform: scale(0.8);
|
|
728
|
-
transform: scale(0.8);
|
|
729
|
-
}
|
|
730
|
-
100% {
|
|
731
|
-
opacity: 1;
|
|
732
|
-
-webkit-transform: scale(1);
|
|
733
|
-
transform: scale(1);
|
|
734
|
-
}
|
|
396
|
+
animation-name: scaleOut;
|
|
735
397
|
}
|
|
736
398
|
@keyframes scaleIn {
|
|
737
399
|
0% {
|
|
738
400
|
opacity: 0;
|
|
739
|
-
|
|
740
|
-
transform: scale(0.8);
|
|
401
|
+
transform: scale(0.8);
|
|
741
402
|
}
|
|
742
403
|
100% {
|
|
743
404
|
opacity: 1;
|
|
744
|
-
|
|
745
|
-
transform: scale(1);
|
|
405
|
+
transform: scale(1);
|
|
746
406
|
}
|
|
747
407
|
}
|
|
748
408
|
|
|
749
409
|
/* Out */
|
|
750
|
-
@-webkit-keyframes scaleOut {
|
|
751
|
-
0% {
|
|
752
|
-
opacity: 1;
|
|
753
|
-
-webkit-transform: scale(1);
|
|
754
|
-
transform: scale(1);
|
|
755
|
-
}
|
|
756
|
-
100% {
|
|
757
|
-
opacity: 0;
|
|
758
|
-
-webkit-transform: scale(0.9);
|
|
759
|
-
transform: scale(0.9);
|
|
760
|
-
}
|
|
761
|
-
}
|
|
762
410
|
@keyframes scaleOut {
|
|
763
411
|
0% {
|
|
764
412
|
opacity: 1;
|
|
765
|
-
|
|
766
|
-
transform: scale(1);
|
|
413
|
+
transform: scale(1);
|
|
767
414
|
}
|
|
768
415
|
100% {
|
|
769
416
|
opacity: 0;
|
|
770
|
-
|
|
771
|
-
transform: scale(0.9);
|
|
417
|
+
transform: scale(0.9);
|
|
772
418
|
}
|
|
773
419
|
}
|
|
774
420
|
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
421
|
+
/* --------------
|
|
422
|
+
Fly
|
|
423
|
+
--------------- */
|
|
779
424
|
|
|
780
425
|
/* Inward */
|
|
781
426
|
.transition.fly {
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
785
|
-
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
427
|
+
animation-duration: 0.6s;
|
|
428
|
+
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
786
429
|
}
|
|
787
430
|
.transition.fly.in {
|
|
788
|
-
|
|
789
|
-
animation-name: flyIn;
|
|
431
|
+
animation-name: flyIn;
|
|
790
432
|
}
|
|
791
433
|
.transition[class*="fly up"].in {
|
|
792
|
-
|
|
793
|
-
animation-name: flyInUp;
|
|
434
|
+
animation-name: flyInUp;
|
|
794
435
|
}
|
|
795
436
|
.transition[class*="fly down"].in {
|
|
796
|
-
|
|
797
|
-
animation-name: flyInDown;
|
|
437
|
+
animation-name: flyInDown;
|
|
798
438
|
}
|
|
799
439
|
.transition[class*="fly left"].in {
|
|
800
|
-
|
|
801
|
-
animation-name: flyInLeft;
|
|
440
|
+
animation-name: flyInLeft;
|
|
802
441
|
}
|
|
803
442
|
.transition[class*="fly right"].in {
|
|
804
|
-
|
|
805
|
-
animation-name: flyInRight;
|
|
443
|
+
animation-name: flyInRight;
|
|
806
444
|
}
|
|
807
445
|
|
|
808
446
|
/* Outward */
|
|
809
447
|
.transition.fly.out {
|
|
810
|
-
|
|
811
|
-
animation-name: flyOut;
|
|
448
|
+
animation-name: flyOut;
|
|
812
449
|
}
|
|
813
450
|
.transition[class*="fly up"].out {
|
|
814
|
-
|
|
815
|
-
animation-name: flyOutUp;
|
|
451
|
+
animation-name: flyOutUp;
|
|
816
452
|
}
|
|
817
453
|
.transition[class*="fly down"].out {
|
|
818
|
-
|
|
819
|
-
animation-name: flyOutDown;
|
|
454
|
+
animation-name: flyOutDown;
|
|
820
455
|
}
|
|
821
456
|
.transition[class*="fly left"].out {
|
|
822
|
-
|
|
823
|
-
animation-name: flyOutLeft;
|
|
457
|
+
animation-name: flyOutLeft;
|
|
824
458
|
}
|
|
825
459
|
.transition[class*="fly right"].out {
|
|
826
|
-
|
|
827
|
-
animation-name: flyOutRight;
|
|
460
|
+
animation-name: flyOutRight;
|
|
828
461
|
}
|
|
829
462
|
|
|
830
463
|
/* In */
|
|
831
|
-
@-webkit-keyframes flyIn {
|
|
832
|
-
0% {
|
|
833
|
-
opacity: 0;
|
|
834
|
-
-webkit-transform: scale3d(0.3, 0.3, 0.3);
|
|
835
|
-
transform: scale3d(0.3, 0.3, 0.3);
|
|
836
|
-
}
|
|
837
|
-
20% {
|
|
838
|
-
-webkit-transform: scale3d(1.1, 1.1, 1.1);
|
|
839
|
-
transform: scale3d(1.1, 1.1, 1.1);
|
|
840
|
-
}
|
|
841
|
-
40% {
|
|
842
|
-
-webkit-transform: scale3d(0.9, 0.9, 0.9);
|
|
843
|
-
transform: scale3d(0.9, 0.9, 0.9);
|
|
844
|
-
}
|
|
845
|
-
60% {
|
|
846
|
-
opacity: 1;
|
|
847
|
-
-webkit-transform: scale3d(1.03, 1.03, 1.03);
|
|
848
|
-
transform: scale3d(1.03, 1.03, 1.03);
|
|
849
|
-
}
|
|
850
|
-
80% {
|
|
851
|
-
-webkit-transform: scale3d(0.97, 0.97, 0.97);
|
|
852
|
-
transform: scale3d(0.97, 0.97, 0.97);
|
|
853
|
-
}
|
|
854
|
-
100% {
|
|
855
|
-
opacity: 1;
|
|
856
|
-
-webkit-transform: scale3d(1, 1, 1);
|
|
857
|
-
transform: scale3d(1, 1, 1);
|
|
858
|
-
}
|
|
859
|
-
}
|
|
860
464
|
@keyframes flyIn {
|
|
861
465
|
0% {
|
|
862
466
|
opacity: 0;
|
|
863
|
-
|
|
864
|
-
transform: scale3d(0.3, 0.3, 0.3);
|
|
467
|
+
transform: scale3d(0.3, 0.3, 0.3);
|
|
865
468
|
}
|
|
866
469
|
20% {
|
|
867
|
-
|
|
868
|
-
transform: scale3d(1.1, 1.1, 1.1);
|
|
470
|
+
transform: scale3d(1.1, 1.1, 1.1);
|
|
869
471
|
}
|
|
870
472
|
40% {
|
|
871
|
-
|
|
872
|
-
transform: scale3d(0.9, 0.9, 0.9);
|
|
473
|
+
transform: scale3d(0.9, 0.9, 0.9);
|
|
873
474
|
}
|
|
874
475
|
60% {
|
|
875
476
|
opacity: 1;
|
|
876
|
-
|
|
877
|
-
transform: scale3d(1.03, 1.03, 1.03);
|
|
477
|
+
transform: scale3d(1.03, 1.03, 1.03);
|
|
878
478
|
}
|
|
879
479
|
80% {
|
|
880
|
-
|
|
881
|
-
transform: scale3d(0.97, 0.97, 0.97);
|
|
480
|
+
transform: scale3d(0.97, 0.97, 0.97);
|
|
882
481
|
}
|
|
883
482
|
100% {
|
|
884
483
|
opacity: 1;
|
|
885
|
-
|
|
886
|
-
transform: scale3d(1, 1, 1);
|
|
887
|
-
}
|
|
888
|
-
}
|
|
889
|
-
@-webkit-keyframes flyInUp {
|
|
890
|
-
0% {
|
|
891
|
-
opacity: 0;
|
|
892
|
-
-webkit-transform: translate3d(0, 1500px, 0);
|
|
893
|
-
transform: translate3d(0, 1500px, 0);
|
|
894
|
-
}
|
|
895
|
-
60% {
|
|
896
|
-
opacity: 1;
|
|
897
|
-
-webkit-transform: translate3d(0, -20px, 0);
|
|
898
|
-
transform: translate3d(0, -20px, 0);
|
|
899
|
-
}
|
|
900
|
-
75% {
|
|
901
|
-
-webkit-transform: translate3d(0, 10px, 0);
|
|
902
|
-
transform: translate3d(0, 10px, 0);
|
|
903
|
-
}
|
|
904
|
-
90% {
|
|
905
|
-
-webkit-transform: translate3d(0, -5px, 0);
|
|
906
|
-
transform: translate3d(0, -5px, 0);
|
|
907
|
-
}
|
|
908
|
-
100% {
|
|
909
|
-
-webkit-transform: translate3d(0, 0, 0);
|
|
910
|
-
transform: translate3d(0, 0, 0);
|
|
484
|
+
transform: scale3d(1, 1, 1);
|
|
911
485
|
}
|
|
912
486
|
}
|
|
913
487
|
@keyframes flyInUp {
|
|
914
488
|
0% {
|
|
915
489
|
opacity: 0;
|
|
916
|
-
|
|
917
|
-
transform: translate3d(0, 1500px, 0);
|
|
490
|
+
transform: translate3d(0, 1500px, 0);
|
|
918
491
|
}
|
|
919
492
|
60% {
|
|
920
493
|
opacity: 1;
|
|
921
|
-
|
|
922
|
-
transform: translate3d(0, -20px, 0);
|
|
494
|
+
transform: translate3d(0, -20px, 0);
|
|
923
495
|
}
|
|
924
496
|
75% {
|
|
925
|
-
|
|
926
|
-
transform: translate3d(0, 10px, 0);
|
|
497
|
+
transform: translate3d(0, 10px, 0);
|
|
927
498
|
}
|
|
928
499
|
90% {
|
|
929
|
-
|
|
930
|
-
transform: translate3d(0, -5px, 0);
|
|
500
|
+
transform: translate3d(0, -5px, 0);
|
|
931
501
|
}
|
|
932
502
|
100% {
|
|
933
|
-
|
|
934
|
-
transform: translate3d(0, 0, 0);
|
|
935
|
-
}
|
|
936
|
-
}
|
|
937
|
-
@-webkit-keyframes flyInDown {
|
|
938
|
-
0% {
|
|
939
|
-
opacity: 0;
|
|
940
|
-
-webkit-transform: translate3d(0, -1500px, 0);
|
|
941
|
-
transform: translate3d(0, -1500px, 0);
|
|
942
|
-
}
|
|
943
|
-
60% {
|
|
944
|
-
opacity: 1;
|
|
945
|
-
-webkit-transform: translate3d(0, 25px, 0);
|
|
946
|
-
transform: translate3d(0, 25px, 0);
|
|
947
|
-
}
|
|
948
|
-
75% {
|
|
949
|
-
-webkit-transform: translate3d(0, -10px, 0);
|
|
950
|
-
transform: translate3d(0, -10px, 0);
|
|
951
|
-
}
|
|
952
|
-
90% {
|
|
953
|
-
-webkit-transform: translate3d(0, 5px, 0);
|
|
954
|
-
transform: translate3d(0, 5px, 0);
|
|
955
|
-
}
|
|
956
|
-
100% {
|
|
957
|
-
-webkit-transform: none;
|
|
958
|
-
transform: none;
|
|
503
|
+
transform: translate3d(0, 0, 0);
|
|
959
504
|
}
|
|
960
505
|
}
|
|
961
506
|
@keyframes flyInDown {
|
|
962
507
|
0% {
|
|
963
508
|
opacity: 0;
|
|
964
|
-
|
|
965
|
-
transform: translate3d(0, -1500px, 0);
|
|
509
|
+
transform: translate3d(0, -1500px, 0);
|
|
966
510
|
}
|
|
967
511
|
60% {
|
|
968
512
|
opacity: 1;
|
|
969
|
-
|
|
970
|
-
transform: translate3d(0, 25px, 0);
|
|
513
|
+
transform: translate3d(0, 25px, 0);
|
|
971
514
|
}
|
|
972
515
|
75% {
|
|
973
|
-
|
|
974
|
-
transform: translate3d(0, -10px, 0);
|
|
516
|
+
transform: translate3d(0, -10px, 0);
|
|
975
517
|
}
|
|
976
518
|
90% {
|
|
977
|
-
|
|
978
|
-
transform: translate3d(0, 5px, 0);
|
|
519
|
+
transform: translate3d(0, 5px, 0);
|
|
979
520
|
}
|
|
980
521
|
100% {
|
|
981
|
-
|
|
982
|
-
transform: none;
|
|
983
|
-
}
|
|
984
|
-
}
|
|
985
|
-
@-webkit-keyframes flyInLeft {
|
|
986
|
-
0% {
|
|
987
|
-
opacity: 0;
|
|
988
|
-
-webkit-transform: translate3d(1500px, 0, 0);
|
|
989
|
-
transform: translate3d(1500px, 0, 0);
|
|
990
|
-
}
|
|
991
|
-
60% {
|
|
992
|
-
opacity: 1;
|
|
993
|
-
-webkit-transform: translate3d(-25px, 0, 0);
|
|
994
|
-
transform: translate3d(-25px, 0, 0);
|
|
995
|
-
}
|
|
996
|
-
75% {
|
|
997
|
-
-webkit-transform: translate3d(10px, 0, 0);
|
|
998
|
-
transform: translate3d(10px, 0, 0);
|
|
999
|
-
}
|
|
1000
|
-
90% {
|
|
1001
|
-
-webkit-transform: translate3d(-5px, 0, 0);
|
|
1002
|
-
transform: translate3d(-5px, 0, 0);
|
|
1003
|
-
}
|
|
1004
|
-
100% {
|
|
1005
|
-
-webkit-transform: none;
|
|
1006
|
-
transform: none;
|
|
522
|
+
transform: none;
|
|
1007
523
|
}
|
|
1008
524
|
}
|
|
1009
525
|
@keyframes flyInLeft {
|
|
1010
526
|
0% {
|
|
1011
527
|
opacity: 0;
|
|
1012
|
-
|
|
1013
|
-
transform: translate3d(1500px, 0, 0);
|
|
1014
|
-
}
|
|
1015
|
-
60% {
|
|
1016
|
-
opacity: 1;
|
|
1017
|
-
-webkit-transform: translate3d(-25px, 0, 0);
|
|
1018
|
-
transform: translate3d(-25px, 0, 0);
|
|
1019
|
-
}
|
|
1020
|
-
75% {
|
|
1021
|
-
-webkit-transform: translate3d(10px, 0, 0);
|
|
1022
|
-
transform: translate3d(10px, 0, 0);
|
|
1023
|
-
}
|
|
1024
|
-
90% {
|
|
1025
|
-
-webkit-transform: translate3d(-5px, 0, 0);
|
|
1026
|
-
transform: translate3d(-5px, 0, 0);
|
|
1027
|
-
}
|
|
1028
|
-
100% {
|
|
1029
|
-
-webkit-transform: none;
|
|
1030
|
-
transform: none;
|
|
1031
|
-
}
|
|
1032
|
-
}
|
|
1033
|
-
@-webkit-keyframes flyInRight {
|
|
1034
|
-
0% {
|
|
1035
|
-
opacity: 0;
|
|
1036
|
-
-webkit-transform: translate3d(-1500px, 0, 0);
|
|
1037
|
-
transform: translate3d(-1500px, 0, 0);
|
|
528
|
+
transform: translate3d(1500px, 0, 0);
|
|
1038
529
|
}
|
|
1039
530
|
60% {
|
|
1040
531
|
opacity: 1;
|
|
1041
|
-
|
|
1042
|
-
transform: translate3d(25px, 0, 0);
|
|
532
|
+
transform: translate3d(-25px, 0, 0);
|
|
1043
533
|
}
|
|
1044
534
|
75% {
|
|
1045
|
-
|
|
1046
|
-
transform: translate3d(-10px, 0, 0);
|
|
535
|
+
transform: translate3d(10px, 0, 0);
|
|
1047
536
|
}
|
|
1048
537
|
90% {
|
|
1049
|
-
|
|
1050
|
-
transform: translate3d(5px, 0, 0);
|
|
538
|
+
transform: translate3d(-5px, 0, 0);
|
|
1051
539
|
}
|
|
1052
540
|
100% {
|
|
1053
|
-
|
|
1054
|
-
transform: none;
|
|
541
|
+
transform: none;
|
|
1055
542
|
}
|
|
1056
543
|
}
|
|
1057
544
|
@keyframes flyInRight {
|
|
1058
545
|
0% {
|
|
1059
546
|
opacity: 0;
|
|
1060
|
-
|
|
1061
|
-
transform: translate3d(-1500px, 0, 0);
|
|
547
|
+
transform: translate3d(-1500px, 0, 0);
|
|
1062
548
|
}
|
|
1063
549
|
60% {
|
|
1064
550
|
opacity: 1;
|
|
1065
|
-
|
|
1066
|
-
transform: translate3d(25px, 0, 0);
|
|
551
|
+
transform: translate3d(25px, 0, 0);
|
|
1067
552
|
}
|
|
1068
553
|
75% {
|
|
1069
|
-
|
|
1070
|
-
transform: translate3d(-10px, 0, 0);
|
|
554
|
+
transform: translate3d(-10px, 0, 0);
|
|
1071
555
|
}
|
|
1072
556
|
90% {
|
|
1073
|
-
|
|
1074
|
-
transform: translate3d(5px, 0, 0);
|
|
557
|
+
transform: translate3d(5px, 0, 0);
|
|
1075
558
|
}
|
|
1076
559
|
100% {
|
|
1077
|
-
|
|
1078
|
-
transform: none;
|
|
560
|
+
transform: none;
|
|
1079
561
|
}
|
|
1080
562
|
}
|
|
1081
563
|
|
|
1082
564
|
/* Out */
|
|
1083
|
-
@-webkit-keyframes flyOut {
|
|
1084
|
-
20% {
|
|
1085
|
-
-webkit-transform: scale3d(0.9, 0.9, 0.9);
|
|
1086
|
-
transform: scale3d(0.9, 0.9, 0.9);
|
|
1087
|
-
}
|
|
1088
|
-
50%,
|
|
1089
|
-
55% {
|
|
1090
|
-
opacity: 1;
|
|
1091
|
-
-webkit-transform: scale3d(1.1, 1.1, 1.1);
|
|
1092
|
-
transform: scale3d(1.1, 1.1, 1.1);
|
|
1093
|
-
}
|
|
1094
|
-
100% {
|
|
1095
|
-
opacity: 0;
|
|
1096
|
-
-webkit-transform: scale3d(0.3, 0.3, 0.3);
|
|
1097
|
-
transform: scale3d(0.3, 0.3, 0.3);
|
|
1098
|
-
}
|
|
1099
|
-
}
|
|
1100
565
|
@keyframes flyOut {
|
|
1101
566
|
20% {
|
|
1102
|
-
|
|
1103
|
-
transform: scale3d(0.9, 0.9, 0.9);
|
|
567
|
+
transform: scale3d(0.9, 0.9, 0.9);
|
|
1104
568
|
}
|
|
1105
569
|
50%,
|
|
1106
570
|
55% {
|
|
1107
571
|
opacity: 1;
|
|
1108
|
-
|
|
1109
|
-
transform: scale3d(1.1, 1.1, 1.1);
|
|
572
|
+
transform: scale3d(1.1, 1.1, 1.1);
|
|
1110
573
|
}
|
|
1111
574
|
100% {
|
|
1112
575
|
opacity: 0;
|
|
1113
|
-
|
|
1114
|
-
transform: scale3d(0.3, 0.3, 0.3);
|
|
1115
|
-
}
|
|
1116
|
-
}
|
|
1117
|
-
@-webkit-keyframes flyOutUp {
|
|
1118
|
-
20% {
|
|
1119
|
-
-webkit-transform: translate3d(0, 10px, 0);
|
|
1120
|
-
transform: translate3d(0, 10px, 0);
|
|
1121
|
-
}
|
|
1122
|
-
40%,
|
|
1123
|
-
45% {
|
|
1124
|
-
opacity: 1;
|
|
1125
|
-
-webkit-transform: translate3d(0, -20px, 0);
|
|
1126
|
-
transform: translate3d(0, -20px, 0);
|
|
1127
|
-
}
|
|
1128
|
-
100% {
|
|
1129
|
-
opacity: 0;
|
|
1130
|
-
-webkit-transform: translate3d(0, 2000px, 0);
|
|
1131
|
-
transform: translate3d(0, 2000px, 0);
|
|
576
|
+
transform: scale3d(0.3, 0.3, 0.3);
|
|
1132
577
|
}
|
|
1133
578
|
}
|
|
1134
579
|
@keyframes flyOutUp {
|
|
1135
580
|
20% {
|
|
1136
|
-
|
|
1137
|
-
transform: translate3d(0, 10px, 0);
|
|
581
|
+
transform: translate3d(0, 10px, 0);
|
|
1138
582
|
}
|
|
1139
583
|
40%,
|
|
1140
584
|
45% {
|
|
1141
585
|
opacity: 1;
|
|
1142
|
-
|
|
1143
|
-
transform: translate3d(0, -20px, 0);
|
|
586
|
+
transform: translate3d(0, -20px, 0);
|
|
1144
587
|
}
|
|
1145
588
|
100% {
|
|
1146
589
|
opacity: 0;
|
|
1147
|
-
|
|
1148
|
-
transform: translate3d(0, 2000px, 0);
|
|
1149
|
-
}
|
|
1150
|
-
}
|
|
1151
|
-
@-webkit-keyframes flyOutDown {
|
|
1152
|
-
20% {
|
|
1153
|
-
-webkit-transform: translate3d(0, -10px, 0);
|
|
1154
|
-
transform: translate3d(0, -10px, 0);
|
|
1155
|
-
}
|
|
1156
|
-
40%,
|
|
1157
|
-
45% {
|
|
1158
|
-
opacity: 1;
|
|
1159
|
-
-webkit-transform: translate3d(0, 20px, 0);
|
|
1160
|
-
transform: translate3d(0, 20px, 0);
|
|
1161
|
-
}
|
|
1162
|
-
100% {
|
|
1163
|
-
opacity: 0;
|
|
1164
|
-
-webkit-transform: translate3d(0, -2000px, 0);
|
|
1165
|
-
transform: translate3d(0, -2000px, 0);
|
|
590
|
+
transform: translate3d(0, 2000px, 0);
|
|
1166
591
|
}
|
|
1167
592
|
}
|
|
1168
593
|
@keyframes flyOutDown {
|
|
1169
594
|
20% {
|
|
1170
|
-
|
|
1171
|
-
transform: translate3d(0, -10px, 0);
|
|
595
|
+
transform: translate3d(0, -10px, 0);
|
|
1172
596
|
}
|
|
1173
597
|
40%,
|
|
1174
598
|
45% {
|
|
1175
599
|
opacity: 1;
|
|
1176
|
-
|
|
1177
|
-
transform: translate3d(0, 20px, 0);
|
|
600
|
+
transform: translate3d(0, 20px, 0);
|
|
1178
601
|
}
|
|
1179
602
|
100% {
|
|
1180
603
|
opacity: 0;
|
|
1181
|
-
|
|
1182
|
-
transform: translate3d(0, -2000px, 0);
|
|
1183
|
-
}
|
|
1184
|
-
}
|
|
1185
|
-
@-webkit-keyframes flyOutRight {
|
|
1186
|
-
20% {
|
|
1187
|
-
opacity: 1;
|
|
1188
|
-
-webkit-transform: translate3d(20px, 0, 0);
|
|
1189
|
-
transform: translate3d(20px, 0, 0);
|
|
1190
|
-
}
|
|
1191
|
-
100% {
|
|
1192
|
-
opacity: 0;
|
|
1193
|
-
-webkit-transform: translate3d(-2000px, 0, 0);
|
|
1194
|
-
transform: translate3d(-2000px, 0, 0);
|
|
604
|
+
transform: translate3d(0, -2000px, 0);
|
|
1195
605
|
}
|
|
1196
606
|
}
|
|
1197
607
|
@keyframes flyOutRight {
|
|
1198
608
|
20% {
|
|
1199
609
|
opacity: 1;
|
|
1200
|
-
|
|
1201
|
-
transform: translate3d(20px, 0, 0);
|
|
1202
|
-
}
|
|
1203
|
-
100% {
|
|
1204
|
-
opacity: 0;
|
|
1205
|
-
-webkit-transform: translate3d(-2000px, 0, 0);
|
|
1206
|
-
transform: translate3d(-2000px, 0, 0);
|
|
1207
|
-
}
|
|
1208
|
-
}
|
|
1209
|
-
@-webkit-keyframes flyOutLeft {
|
|
1210
|
-
20% {
|
|
1211
|
-
opacity: 1;
|
|
1212
|
-
-webkit-transform: translate3d(-20px, 0, 0);
|
|
1213
|
-
transform: translate3d(-20px, 0, 0);
|
|
610
|
+
transform: translate3d(20px, 0, 0);
|
|
1214
611
|
}
|
|
1215
612
|
100% {
|
|
1216
613
|
opacity: 0;
|
|
1217
|
-
|
|
1218
|
-
transform: translate3d(2000px, 0, 0);
|
|
614
|
+
transform: translate3d(-2000px, 0, 0);
|
|
1219
615
|
}
|
|
1220
616
|
}
|
|
1221
617
|
@keyframes flyOutLeft {
|
|
1222
618
|
20% {
|
|
1223
619
|
opacity: 1;
|
|
1224
|
-
|
|
1225
|
-
transform: translate3d(-20px, 0, 0);
|
|
620
|
+
transform: translate3d(-20px, 0, 0);
|
|
1226
621
|
}
|
|
1227
622
|
100% {
|
|
1228
623
|
opacity: 0;
|
|
1229
|
-
|
|
1230
|
-
transform: translate3d(2000px, 0, 0);
|
|
624
|
+
transform: translate3d(2000px, 0, 0);
|
|
1231
625
|
}
|
|
1232
626
|
}
|
|
1233
627
|
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
628
|
+
/* --------------
|
|
629
|
+
Slide
|
|
630
|
+
--------------- */
|
|
1238
631
|
.transition.slide.in,
|
|
1239
632
|
.transition[class*="slide down"].in {
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
-webkit-transform-origin: top center;
|
|
1243
|
-
transform-origin: top center;
|
|
633
|
+
animation-name: slideInY;
|
|
634
|
+
transform-origin: top center;
|
|
1244
635
|
}
|
|
1245
636
|
.transition[class*="slide up"].in {
|
|
1246
|
-
|
|
1247
|
-
|
|
1248
|
-
-webkit-transform-origin: bottom center;
|
|
1249
|
-
transform-origin: bottom center;
|
|
637
|
+
animation-name: slideInY;
|
|
638
|
+
transform-origin: bottom center;
|
|
1250
639
|
}
|
|
1251
640
|
.transition[class*="slide left"].in {
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
-webkit-transform-origin: right center;
|
|
1255
|
-
transform-origin: right center;
|
|
641
|
+
animation-name: slideInX;
|
|
642
|
+
transform-origin: right center;
|
|
1256
643
|
}
|
|
1257
644
|
.transition[class*="slide right"].in {
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
-webkit-transform-origin: left center;
|
|
1261
|
-
transform-origin: left center;
|
|
645
|
+
animation-name: slideInX;
|
|
646
|
+
transform-origin: left center;
|
|
1262
647
|
}
|
|
1263
648
|
.transition.slide.out,
|
|
1264
649
|
.transition[class*="slide down"].out {
|
|
1265
|
-
|
|
1266
|
-
|
|
1267
|
-
-webkit-transform-origin: top center;
|
|
1268
|
-
transform-origin: top center;
|
|
650
|
+
animation-name: slideOutY;
|
|
651
|
+
transform-origin: top center;
|
|
1269
652
|
}
|
|
1270
653
|
.transition[class*="slide up"].out {
|
|
1271
|
-
|
|
1272
|
-
|
|
1273
|
-
-webkit-transform-origin: bottom center;
|
|
1274
|
-
transform-origin: bottom center;
|
|
654
|
+
animation-name: slideOutY;
|
|
655
|
+
transform-origin: bottom center;
|
|
1275
656
|
}
|
|
1276
657
|
.transition[class*="slide left"].out {
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
-webkit-transform-origin: right center;
|
|
1280
|
-
transform-origin: right center;
|
|
658
|
+
animation-name: slideOutX;
|
|
659
|
+
transform-origin: right center;
|
|
1281
660
|
}
|
|
1282
661
|
.transition[class*="slide right"].out {
|
|
1283
|
-
|
|
1284
|
-
|
|
1285
|
-
-webkit-transform-origin: left center;
|
|
1286
|
-
transform-origin: left center;
|
|
662
|
+
animation-name: slideOutX;
|
|
663
|
+
transform-origin: left center;
|
|
1287
664
|
}
|
|
1288
665
|
|
|
1289
666
|
/* In */
|
|
1290
|
-
@-webkit-keyframes slideInY {
|
|
1291
|
-
0% {
|
|
1292
|
-
opacity: 0;
|
|
1293
|
-
-webkit-transform: scaleY(0);
|
|
1294
|
-
transform: scaleY(0);
|
|
1295
|
-
}
|
|
1296
|
-
100% {
|
|
1297
|
-
opacity: 1;
|
|
1298
|
-
-webkit-transform: scaleY(1);
|
|
1299
|
-
transform: scaleY(1);
|
|
1300
|
-
}
|
|
1301
|
-
}
|
|
1302
667
|
@keyframes slideInY {
|
|
1303
668
|
0% {
|
|
1304
669
|
opacity: 0;
|
|
1305
|
-
|
|
1306
|
-
transform: scaleY(0);
|
|
670
|
+
transform: scaleY(0);
|
|
1307
671
|
}
|
|
1308
672
|
100% {
|
|
1309
673
|
opacity: 1;
|
|
1310
|
-
|
|
1311
|
-
transform: scaleY(1);
|
|
1312
|
-
}
|
|
1313
|
-
}
|
|
1314
|
-
@-webkit-keyframes slideInX {
|
|
1315
|
-
0% {
|
|
1316
|
-
opacity: 0;
|
|
1317
|
-
-webkit-transform: scaleX(0);
|
|
1318
|
-
transform: scaleX(0);
|
|
1319
|
-
}
|
|
1320
|
-
100% {
|
|
1321
|
-
opacity: 1;
|
|
1322
|
-
-webkit-transform: scaleX(1);
|
|
1323
|
-
transform: scaleX(1);
|
|
674
|
+
transform: scaleY(1);
|
|
1324
675
|
}
|
|
1325
676
|
}
|
|
1326
677
|
@keyframes slideInX {
|
|
1327
678
|
0% {
|
|
1328
679
|
opacity: 0;
|
|
1329
|
-
|
|
1330
|
-
transform: scaleX(0);
|
|
680
|
+
transform: scaleX(0);
|
|
1331
681
|
}
|
|
1332
682
|
100% {
|
|
1333
683
|
opacity: 1;
|
|
1334
|
-
|
|
1335
|
-
transform: scaleX(1);
|
|
684
|
+
transform: scaleX(1);
|
|
1336
685
|
}
|
|
1337
686
|
}
|
|
1338
687
|
|
|
1339
688
|
/* Out */
|
|
1340
|
-
@-webkit-keyframes slideOutY {
|
|
1341
|
-
0% {
|
|
1342
|
-
opacity: 1;
|
|
1343
|
-
-webkit-transform: scaleY(1);
|
|
1344
|
-
transform: scaleY(1);
|
|
1345
|
-
}
|
|
1346
|
-
100% {
|
|
1347
|
-
opacity: 0;
|
|
1348
|
-
-webkit-transform: scaleY(0);
|
|
1349
|
-
transform: scaleY(0);
|
|
1350
|
-
}
|
|
1351
|
-
}
|
|
1352
689
|
@keyframes slideOutY {
|
|
1353
690
|
0% {
|
|
1354
691
|
opacity: 1;
|
|
1355
|
-
|
|
1356
|
-
transform: scaleY(1);
|
|
1357
|
-
}
|
|
1358
|
-
100% {
|
|
1359
|
-
opacity: 0;
|
|
1360
|
-
-webkit-transform: scaleY(0);
|
|
1361
|
-
transform: scaleY(0);
|
|
1362
|
-
}
|
|
1363
|
-
}
|
|
1364
|
-
@-webkit-keyframes slideOutX {
|
|
1365
|
-
0% {
|
|
1366
|
-
opacity: 1;
|
|
1367
|
-
-webkit-transform: scaleX(1);
|
|
1368
|
-
transform: scaleX(1);
|
|
692
|
+
transform: scaleY(1);
|
|
1369
693
|
}
|
|
1370
694
|
100% {
|
|
1371
695
|
opacity: 0;
|
|
1372
|
-
|
|
1373
|
-
transform: scaleX(0);
|
|
696
|
+
transform: scaleY(0);
|
|
1374
697
|
}
|
|
1375
698
|
}
|
|
1376
699
|
@keyframes slideOutX {
|
|
1377
700
|
0% {
|
|
1378
701
|
opacity: 1;
|
|
1379
|
-
|
|
1380
|
-
transform: scaleX(1);
|
|
702
|
+
transform: scaleX(1);
|
|
1381
703
|
}
|
|
1382
704
|
100% {
|
|
1383
705
|
opacity: 0;
|
|
1384
|
-
|
|
1385
|
-
transform: scaleX(0);
|
|
706
|
+
transform: scaleX(0);
|
|
1386
707
|
}
|
|
1387
708
|
}
|
|
1388
709
|
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1392
|
-
|
|
710
|
+
/* --------------
|
|
711
|
+
Swing
|
|
712
|
+
--------------- */
|
|
1393
713
|
.transition.swing {
|
|
1394
|
-
|
|
1395
|
-
animation-duration: 800ms;
|
|
714
|
+
animation-duration: 800ms;
|
|
1396
715
|
}
|
|
1397
716
|
.transition[class*="swing down"].in {
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
-webkit-transform-origin: top center;
|
|
1401
|
-
transform-origin: top center;
|
|
717
|
+
animation-name: swingInX;
|
|
718
|
+
transform-origin: top center;
|
|
1402
719
|
}
|
|
1403
720
|
.transition[class*="swing up"].in {
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
-webkit-transform-origin: bottom center;
|
|
1407
|
-
transform-origin: bottom center;
|
|
721
|
+
animation-name: swingInX;
|
|
722
|
+
transform-origin: bottom center;
|
|
1408
723
|
}
|
|
1409
724
|
.transition[class*="swing left"].in {
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
-webkit-transform-origin: right center;
|
|
1413
|
-
transform-origin: right center;
|
|
725
|
+
animation-name: swingInY;
|
|
726
|
+
transform-origin: right center;
|
|
1414
727
|
}
|
|
1415
728
|
.transition[class*="swing right"].in {
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
-webkit-transform-origin: left center;
|
|
1419
|
-
transform-origin: left center;
|
|
729
|
+
animation-name: swingInY;
|
|
730
|
+
transform-origin: left center;
|
|
1420
731
|
}
|
|
1421
732
|
.transition.swing.out,
|
|
1422
733
|
.transition[class*="swing down"].out {
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
-webkit-transform-origin: top center;
|
|
1426
|
-
transform-origin: top center;
|
|
734
|
+
animation-name: swingOutX;
|
|
735
|
+
transform-origin: top center;
|
|
1427
736
|
}
|
|
1428
737
|
.transition[class*="swing up"].out {
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
-webkit-transform-origin: bottom center;
|
|
1432
|
-
transform-origin: bottom center;
|
|
738
|
+
animation-name: swingOutX;
|
|
739
|
+
transform-origin: bottom center;
|
|
1433
740
|
}
|
|
1434
741
|
.transition[class*="swing left"].out {
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
-webkit-transform-origin: right center;
|
|
1438
|
-
transform-origin: right center;
|
|
742
|
+
animation-name: swingOutY;
|
|
743
|
+
transform-origin: right center;
|
|
1439
744
|
}
|
|
1440
745
|
.transition[class*="swing right"].out {
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
-webkit-transform-origin: left center;
|
|
1444
|
-
transform-origin: left center;
|
|
746
|
+
animation-name: swingOutY;
|
|
747
|
+
transform-origin: left center;
|
|
1445
748
|
}
|
|
1446
749
|
|
|
1447
750
|
/* In */
|
|
1448
|
-
@-webkit-keyframes swingInX {
|
|
1449
|
-
0% {
|
|
1450
|
-
-webkit-transform: perspective(1000px) rotateX(90deg);
|
|
1451
|
-
transform: perspective(1000px) rotateX(90deg);
|
|
1452
|
-
opacity: 0;
|
|
1453
|
-
}
|
|
1454
|
-
40% {
|
|
1455
|
-
-webkit-transform: perspective(1000px) rotateX(-30deg);
|
|
1456
|
-
transform: perspective(1000px) rotateX(-30deg);
|
|
1457
|
-
opacity: 1;
|
|
1458
|
-
}
|
|
1459
|
-
60% {
|
|
1460
|
-
-webkit-transform: perspective(1000px) rotateX(15deg);
|
|
1461
|
-
transform: perspective(1000px) rotateX(15deg);
|
|
1462
|
-
}
|
|
1463
|
-
80% {
|
|
1464
|
-
-webkit-transform: perspective(1000px) rotateX(-7.5deg);
|
|
1465
|
-
transform: perspective(1000px) rotateX(-7.5deg);
|
|
1466
|
-
}
|
|
1467
|
-
100% {
|
|
1468
|
-
-webkit-transform: perspective(1000px) rotateX(0deg);
|
|
1469
|
-
transform: perspective(1000px) rotateX(0deg);
|
|
1470
|
-
}
|
|
1471
|
-
}
|
|
1472
751
|
@keyframes swingInX {
|
|
1473
752
|
0% {
|
|
1474
|
-
|
|
1475
|
-
transform: perspective(1000px) rotateX(90deg);
|
|
753
|
+
transform: perspective(1000px) rotateX(90deg);
|
|
1476
754
|
opacity: 0;
|
|
1477
755
|
}
|
|
1478
756
|
40% {
|
|
1479
|
-
|
|
1480
|
-
transform: perspective(1000px) rotateX(-30deg);
|
|
757
|
+
transform: perspective(1000px) rotateX(-30deg);
|
|
1481
758
|
opacity: 1;
|
|
1482
759
|
}
|
|
1483
760
|
60% {
|
|
1484
|
-
|
|
1485
|
-
transform: perspective(1000px) rotateX(15deg);
|
|
761
|
+
transform: perspective(1000px) rotateX(15deg);
|
|
1486
762
|
}
|
|
1487
763
|
80% {
|
|
1488
|
-
|
|
1489
|
-
transform: perspective(1000px) rotateX(-7.5deg);
|
|
764
|
+
transform: perspective(1000px) rotateX(-7.5deg);
|
|
1490
765
|
}
|
|
1491
766
|
100% {
|
|
1492
|
-
|
|
1493
|
-
transform: perspective(1000px) rotateX(0deg);
|
|
1494
|
-
}
|
|
1495
|
-
}
|
|
1496
|
-
@-webkit-keyframes swingInY {
|
|
1497
|
-
0% {
|
|
1498
|
-
-webkit-transform: perspective(1000px) rotateY(-90deg);
|
|
1499
|
-
transform: perspective(1000px) rotateY(-90deg);
|
|
1500
|
-
opacity: 0;
|
|
1501
|
-
}
|
|
1502
|
-
40% {
|
|
1503
|
-
-webkit-transform: perspective(1000px) rotateY(30deg);
|
|
1504
|
-
transform: perspective(1000px) rotateY(30deg);
|
|
1505
|
-
opacity: 1;
|
|
1506
|
-
}
|
|
1507
|
-
60% {
|
|
1508
|
-
-webkit-transform: perspective(1000px) rotateY(-17.5deg);
|
|
1509
|
-
transform: perspective(1000px) rotateY(-17.5deg);
|
|
1510
|
-
}
|
|
1511
|
-
80% {
|
|
1512
|
-
-webkit-transform: perspective(1000px) rotateY(7.5deg);
|
|
1513
|
-
transform: perspective(1000px) rotateY(7.5deg);
|
|
1514
|
-
}
|
|
1515
|
-
100% {
|
|
1516
|
-
-webkit-transform: perspective(1000px) rotateY(0deg);
|
|
1517
|
-
transform: perspective(1000px) rotateY(0deg);
|
|
767
|
+
transform: perspective(1000px) rotateX(0);
|
|
1518
768
|
}
|
|
1519
769
|
}
|
|
1520
770
|
@keyframes swingInY {
|
|
1521
771
|
0% {
|
|
1522
|
-
|
|
1523
|
-
transform: perspective(1000px) rotateY(-90deg);
|
|
772
|
+
transform: perspective(1000px) rotateY(-90deg);
|
|
1524
773
|
opacity: 0;
|
|
1525
774
|
}
|
|
1526
775
|
40% {
|
|
1527
|
-
|
|
1528
|
-
transform: perspective(1000px) rotateY(30deg);
|
|
776
|
+
transform: perspective(1000px) rotateY(30deg);
|
|
1529
777
|
opacity: 1;
|
|
1530
778
|
}
|
|
1531
779
|
60% {
|
|
1532
|
-
|
|
1533
|
-
transform: perspective(1000px) rotateY(-17.5deg);
|
|
780
|
+
transform: perspective(1000px) rotateY(-17.5deg);
|
|
1534
781
|
}
|
|
1535
782
|
80% {
|
|
1536
|
-
|
|
1537
|
-
transform: perspective(1000px) rotateY(7.5deg);
|
|
783
|
+
transform: perspective(1000px) rotateY(7.5deg);
|
|
1538
784
|
}
|
|
1539
785
|
100% {
|
|
1540
|
-
|
|
1541
|
-
transform: perspective(1000px) rotateY(0deg);
|
|
786
|
+
transform: perspective(1000px) rotateY(0);
|
|
1542
787
|
}
|
|
1543
788
|
}
|
|
1544
789
|
|
|
1545
790
|
/* Out */
|
|
1546
|
-
@-webkit-keyframes swingOutX {
|
|
1547
|
-
0% {
|
|
1548
|
-
-webkit-transform: perspective(1000px) rotateX(0deg);
|
|
1549
|
-
transform: perspective(1000px) rotateX(0deg);
|
|
1550
|
-
}
|
|
1551
|
-
40% {
|
|
1552
|
-
-webkit-transform: perspective(1000px) rotateX(-7.5deg);
|
|
1553
|
-
transform: perspective(1000px) rotateX(-7.5deg);
|
|
1554
|
-
}
|
|
1555
|
-
60% {
|
|
1556
|
-
-webkit-transform: perspective(1000px) rotateX(17.5deg);
|
|
1557
|
-
transform: perspective(1000px) rotateX(17.5deg);
|
|
1558
|
-
}
|
|
1559
|
-
80% {
|
|
1560
|
-
-webkit-transform: perspective(1000px) rotateX(-30deg);
|
|
1561
|
-
transform: perspective(1000px) rotateX(-30deg);
|
|
1562
|
-
opacity: 1;
|
|
1563
|
-
}
|
|
1564
|
-
100% {
|
|
1565
|
-
-webkit-transform: perspective(1000px) rotateX(90deg);
|
|
1566
|
-
transform: perspective(1000px) rotateX(90deg);
|
|
1567
|
-
opacity: 0;
|
|
1568
|
-
}
|
|
1569
|
-
}
|
|
1570
791
|
@keyframes swingOutX {
|
|
1571
792
|
0% {
|
|
1572
|
-
|
|
1573
|
-
transform: perspective(1000px) rotateX(0deg);
|
|
1574
|
-
}
|
|
1575
|
-
40% {
|
|
1576
|
-
-webkit-transform: perspective(1000px) rotateX(-7.5deg);
|
|
1577
|
-
transform: perspective(1000px) rotateX(-7.5deg);
|
|
1578
|
-
}
|
|
1579
|
-
60% {
|
|
1580
|
-
-webkit-transform: perspective(1000px) rotateX(17.5deg);
|
|
1581
|
-
transform: perspective(1000px) rotateX(17.5deg);
|
|
1582
|
-
}
|
|
1583
|
-
80% {
|
|
1584
|
-
-webkit-transform: perspective(1000px) rotateX(-30deg);
|
|
1585
|
-
transform: perspective(1000px) rotateX(-30deg);
|
|
1586
|
-
opacity: 1;
|
|
1587
|
-
}
|
|
1588
|
-
100% {
|
|
1589
|
-
-webkit-transform: perspective(1000px) rotateX(90deg);
|
|
1590
|
-
transform: perspective(1000px) rotateX(90deg);
|
|
1591
|
-
opacity: 0;
|
|
1592
|
-
}
|
|
1593
|
-
}
|
|
1594
|
-
@-webkit-keyframes swingOutY {
|
|
1595
|
-
0% {
|
|
1596
|
-
-webkit-transform: perspective(1000px) rotateY(0deg);
|
|
1597
|
-
transform: perspective(1000px) rotateY(0deg);
|
|
793
|
+
transform: perspective(1000px) rotateX(0);
|
|
1598
794
|
}
|
|
1599
795
|
40% {
|
|
1600
|
-
|
|
1601
|
-
transform: perspective(1000px) rotateY(7.5deg);
|
|
796
|
+
transform: perspective(1000px) rotateX(-7.5deg);
|
|
1602
797
|
}
|
|
1603
798
|
60% {
|
|
1604
|
-
|
|
1605
|
-
transform: perspective(1000px) rotateY(-10deg);
|
|
799
|
+
transform: perspective(1000px) rotateX(17.5deg);
|
|
1606
800
|
}
|
|
1607
801
|
80% {
|
|
1608
|
-
|
|
1609
|
-
transform: perspective(1000px) rotateY(30deg);
|
|
802
|
+
transform: perspective(1000px) rotateX(-30deg);
|
|
1610
803
|
opacity: 1;
|
|
1611
804
|
}
|
|
1612
805
|
100% {
|
|
1613
|
-
|
|
1614
|
-
transform: perspective(1000px) rotateY(-90deg);
|
|
806
|
+
transform: perspective(1000px) rotateX(90deg);
|
|
1615
807
|
opacity: 0;
|
|
1616
808
|
}
|
|
1617
809
|
}
|
|
1618
810
|
@keyframes swingOutY {
|
|
1619
811
|
0% {
|
|
1620
|
-
|
|
1621
|
-
transform: perspective(1000px) rotateY(0deg);
|
|
812
|
+
transform: perspective(1000px) rotateY(0);
|
|
1622
813
|
}
|
|
1623
814
|
40% {
|
|
1624
|
-
|
|
1625
|
-
transform: perspective(1000px) rotateY(7.5deg);
|
|
815
|
+
transform: perspective(1000px) rotateY(7.5deg);
|
|
1626
816
|
}
|
|
1627
817
|
60% {
|
|
1628
|
-
|
|
1629
|
-
transform: perspective(1000px) rotateY(-10deg);
|
|
818
|
+
transform: perspective(1000px) rotateY(-10deg);
|
|
1630
819
|
}
|
|
1631
820
|
80% {
|
|
1632
|
-
|
|
1633
|
-
transform: perspective(1000px) rotateY(30deg);
|
|
821
|
+
transform: perspective(1000px) rotateY(30deg);
|
|
1634
822
|
opacity: 1;
|
|
1635
823
|
}
|
|
1636
824
|
100% {
|
|
1637
|
-
|
|
1638
|
-
transform: perspective(1000px) rotateY(-90deg);
|
|
825
|
+
transform: perspective(1000px) rotateY(-90deg);
|
|
1639
826
|
opacity: 0;
|
|
1640
827
|
}
|
|
1641
828
|
}
|
|
1642
829
|
|
|
1643
|
-
|
|
1644
|
-
|
|
1645
|
-
|
|
1646
|
-
|
|
830
|
+
/* --------------
|
|
831
|
+
Zoom
|
|
832
|
+
--------------- */
|
|
1647
833
|
.transition.zoom.in {
|
|
1648
|
-
|
|
1649
|
-
animation-name: zoomIn;
|
|
834
|
+
animation-name: zoomIn;
|
|
1650
835
|
}
|
|
1651
836
|
.transition.zoom.out {
|
|
1652
|
-
|
|
1653
|
-
animation-name: zoomOut;
|
|
1654
|
-
}
|
|
1655
|
-
@-webkit-keyframes zoomIn {
|
|
1656
|
-
0% {
|
|
1657
|
-
opacity: 1;
|
|
1658
|
-
-webkit-transform: scale(0);
|
|
1659
|
-
transform: scale(0);
|
|
1660
|
-
}
|
|
1661
|
-
100% {
|
|
1662
|
-
opacity: 1;
|
|
1663
|
-
-webkit-transform: scale(1);
|
|
1664
|
-
transform: scale(1);
|
|
1665
|
-
}
|
|
837
|
+
animation-name: zoomOut;
|
|
1666
838
|
}
|
|
1667
839
|
@keyframes zoomIn {
|
|
1668
840
|
0% {
|
|
1669
841
|
opacity: 1;
|
|
1670
|
-
|
|
1671
|
-
transform: scale(0);
|
|
842
|
+
transform: scale(0);
|
|
1672
843
|
}
|
|
1673
844
|
100% {
|
|
1674
845
|
opacity: 1;
|
|
1675
|
-
|
|
1676
|
-
transform: scale(1);
|
|
1677
|
-
}
|
|
1678
|
-
}
|
|
1679
|
-
@-webkit-keyframes zoomOut {
|
|
1680
|
-
0% {
|
|
1681
|
-
opacity: 1;
|
|
1682
|
-
-webkit-transform: scale(1);
|
|
1683
|
-
transform: scale(1);
|
|
1684
|
-
}
|
|
1685
|
-
100% {
|
|
1686
|
-
opacity: 1;
|
|
1687
|
-
-webkit-transform: scale(0);
|
|
1688
|
-
transform: scale(0);
|
|
846
|
+
transform: scale(1);
|
|
1689
847
|
}
|
|
1690
848
|
}
|
|
1691
849
|
@keyframes zoomOut {
|
|
1692
850
|
0% {
|
|
1693
851
|
opacity: 1;
|
|
1694
|
-
|
|
1695
|
-
transform: scale(1);
|
|
852
|
+
transform: scale(1);
|
|
1696
853
|
}
|
|
1697
854
|
100% {
|
|
1698
855
|
opacity: 1;
|
|
1699
|
-
|
|
1700
|
-
transform: scale(0);
|
|
856
|
+
transform: scale(0);
|
|
1701
857
|
}
|
|
1702
858
|
}
|
|
1703
859
|
|
|
@@ -1707,69 +863,42 @@
|
|
|
1707
863
|
*******************************/
|
|
1708
864
|
|
|
1709
865
|
|
|
1710
|
-
|
|
866
|
+
/* --------------
|
|
1711
867
|
Emphasis
|
|
1712
|
-
|
|
1713
|
-
|
|
868
|
+
--------------- */
|
|
1714
869
|
.flash.transition {
|
|
1715
|
-
|
|
1716
|
-
|
|
1717
|
-
-webkit-animation-name: flash;
|
|
1718
|
-
animation-name: flash;
|
|
870
|
+
animation-duration: 750ms;
|
|
871
|
+
animation-name: flash;
|
|
1719
872
|
}
|
|
1720
873
|
.shake.transition {
|
|
1721
|
-
|
|
1722
|
-
|
|
1723
|
-
-webkit-animation-name: shake;
|
|
1724
|
-
animation-name: shake;
|
|
874
|
+
animation-duration: 750ms;
|
|
875
|
+
animation-name: shake;
|
|
1725
876
|
}
|
|
1726
877
|
.bounce.transition {
|
|
1727
|
-
|
|
1728
|
-
|
|
1729
|
-
-webkit-animation-name: bounce;
|
|
1730
|
-
animation-name: bounce;
|
|
878
|
+
animation-duration: 750ms;
|
|
879
|
+
animation-name: bounce;
|
|
1731
880
|
}
|
|
1732
881
|
.tada.transition {
|
|
1733
|
-
|
|
1734
|
-
|
|
1735
|
-
-webkit-animation-name: tada;
|
|
1736
|
-
animation-name: tada;
|
|
882
|
+
animation-duration: 750ms;
|
|
883
|
+
animation-name: tada;
|
|
1737
884
|
}
|
|
1738
885
|
.pulse.transition {
|
|
1739
|
-
|
|
1740
|
-
|
|
1741
|
-
-webkit-animation-name: pulse;
|
|
1742
|
-
animation-name: pulse;
|
|
886
|
+
animation-duration: 500ms;
|
|
887
|
+
animation-name: pulse;
|
|
1743
888
|
}
|
|
1744
889
|
.jiggle.transition {
|
|
1745
|
-
|
|
1746
|
-
|
|
1747
|
-
-webkit-animation-name: jiggle;
|
|
1748
|
-
animation-name: jiggle;
|
|
890
|
+
animation-duration: 750ms;
|
|
891
|
+
animation-name: jiggle;
|
|
1749
892
|
}
|
|
1750
893
|
.transition.glow {
|
|
1751
|
-
|
|
1752
|
-
|
|
1753
|
-
-webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
|
1754
|
-
animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
|
894
|
+
animation-duration: 2000ms;
|
|
895
|
+
animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
|
1755
896
|
}
|
|
1756
897
|
.transition.glow {
|
|
1757
|
-
|
|
1758
|
-
animation-name: glow;
|
|
898
|
+
animation-name: glow;
|
|
1759
899
|
}
|
|
1760
900
|
|
|
1761
901
|
/* Flash */
|
|
1762
|
-
@-webkit-keyframes flash {
|
|
1763
|
-
0%,
|
|
1764
|
-
50%,
|
|
1765
|
-
100% {
|
|
1766
|
-
opacity: 1;
|
|
1767
|
-
}
|
|
1768
|
-
25%,
|
|
1769
|
-
75% {
|
|
1770
|
-
opacity: 0;
|
|
1771
|
-
}
|
|
1772
|
-
}
|
|
1773
902
|
@keyframes flash {
|
|
1774
903
|
0%,
|
|
1775
904
|
50%,
|
|
@@ -1783,266 +912,119 @@
|
|
|
1783
912
|
}
|
|
1784
913
|
|
|
1785
914
|
/* Shake */
|
|
1786
|
-
@-webkit-keyframes shake {
|
|
1787
|
-
0%,
|
|
1788
|
-
100% {
|
|
1789
|
-
-webkit-transform: translateX(0);
|
|
1790
|
-
transform: translateX(0);
|
|
1791
|
-
}
|
|
1792
|
-
10%,
|
|
1793
|
-
30%,
|
|
1794
|
-
50%,
|
|
1795
|
-
70%,
|
|
1796
|
-
90% {
|
|
1797
|
-
-webkit-transform: translateX(-10px);
|
|
1798
|
-
transform: translateX(-10px);
|
|
1799
|
-
}
|
|
1800
|
-
20%,
|
|
1801
|
-
40%,
|
|
1802
|
-
60%,
|
|
1803
|
-
80% {
|
|
1804
|
-
-webkit-transform: translateX(10px);
|
|
1805
|
-
transform: translateX(10px);
|
|
1806
|
-
}
|
|
1807
|
-
}
|
|
1808
915
|
@keyframes shake {
|
|
1809
916
|
0%,
|
|
1810
917
|
100% {
|
|
1811
|
-
|
|
1812
|
-
transform: translateX(0);
|
|
918
|
+
transform: translateX(0);
|
|
1813
919
|
}
|
|
1814
920
|
10%,
|
|
1815
921
|
30%,
|
|
1816
922
|
50%,
|
|
1817
923
|
70%,
|
|
1818
924
|
90% {
|
|
1819
|
-
|
|
1820
|
-
transform: translateX(-10px);
|
|
925
|
+
transform: translateX(-10px);
|
|
1821
926
|
}
|
|
1822
927
|
20%,
|
|
1823
928
|
40%,
|
|
1824
929
|
60%,
|
|
1825
930
|
80% {
|
|
1826
|
-
|
|
1827
|
-
transform: translateX(10px);
|
|
931
|
+
transform: translateX(10px);
|
|
1828
932
|
}
|
|
1829
933
|
}
|
|
1830
934
|
|
|
1831
935
|
/* Bounce */
|
|
1832
|
-
@-webkit-keyframes bounce {
|
|
1833
|
-
0%,
|
|
1834
|
-
20%,
|
|
1835
|
-
50%,
|
|
1836
|
-
80%,
|
|
1837
|
-
100% {
|
|
1838
|
-
-webkit-transform: translateY(0);
|
|
1839
|
-
transform: translateY(0);
|
|
1840
|
-
}
|
|
1841
|
-
40% {
|
|
1842
|
-
-webkit-transform: translateY(-30px);
|
|
1843
|
-
transform: translateY(-30px);
|
|
1844
|
-
}
|
|
1845
|
-
60% {
|
|
1846
|
-
-webkit-transform: translateY(-15px);
|
|
1847
|
-
transform: translateY(-15px);
|
|
1848
|
-
}
|
|
1849
|
-
}
|
|
1850
936
|
@keyframes bounce {
|
|
1851
937
|
0%,
|
|
1852
938
|
20%,
|
|
1853
939
|
50%,
|
|
1854
940
|
80%,
|
|
1855
941
|
100% {
|
|
1856
|
-
|
|
1857
|
-
transform: translateY(0);
|
|
942
|
+
transform: translateY(0);
|
|
1858
943
|
}
|
|
1859
944
|
40% {
|
|
1860
|
-
|
|
1861
|
-
transform: translateY(-30px);
|
|
945
|
+
transform: translateY(-30px);
|
|
1862
946
|
}
|
|
1863
947
|
60% {
|
|
1864
|
-
|
|
1865
|
-
transform: translateY(-15px);
|
|
948
|
+
transform: translateY(-15px);
|
|
1866
949
|
}
|
|
1867
950
|
}
|
|
1868
951
|
|
|
1869
952
|
/* Tada */
|
|
1870
|
-
@-webkit-keyframes tada {
|
|
1871
|
-
0% {
|
|
1872
|
-
-webkit-transform: scale(1);
|
|
1873
|
-
transform: scale(1);
|
|
1874
|
-
}
|
|
1875
|
-
10%,
|
|
1876
|
-
20% {
|
|
1877
|
-
-webkit-transform: scale(0.9) rotate(-3deg);
|
|
1878
|
-
transform: scale(0.9) rotate(-3deg);
|
|
1879
|
-
}
|
|
1880
|
-
30%,
|
|
1881
|
-
50%,
|
|
1882
|
-
70%,
|
|
1883
|
-
90% {
|
|
1884
|
-
-webkit-transform: scale(1.1) rotate(3deg);
|
|
1885
|
-
transform: scale(1.1) rotate(3deg);
|
|
1886
|
-
}
|
|
1887
|
-
40%,
|
|
1888
|
-
60%,
|
|
1889
|
-
80% {
|
|
1890
|
-
-webkit-transform: scale(1.1) rotate(-3deg);
|
|
1891
|
-
transform: scale(1.1) rotate(-3deg);
|
|
1892
|
-
}
|
|
1893
|
-
100% {
|
|
1894
|
-
-webkit-transform: scale(1) rotate(0);
|
|
1895
|
-
transform: scale(1) rotate(0);
|
|
1896
|
-
}
|
|
1897
|
-
}
|
|
1898
953
|
@keyframes tada {
|
|
1899
954
|
0% {
|
|
1900
|
-
|
|
1901
|
-
transform: scale(1);
|
|
955
|
+
transform: scale(1);
|
|
1902
956
|
}
|
|
1903
957
|
10%,
|
|
1904
958
|
20% {
|
|
1905
|
-
|
|
1906
|
-
transform: scale(0.9) rotate(-3deg);
|
|
959
|
+
transform: scale(0.9) rotate(-3deg);
|
|
1907
960
|
}
|
|
1908
961
|
30%,
|
|
1909
962
|
50%,
|
|
1910
963
|
70%,
|
|
1911
964
|
90% {
|
|
1912
|
-
|
|
1913
|
-
transform: scale(1.1) rotate(3deg);
|
|
965
|
+
transform: scale(1.1) rotate(3deg);
|
|
1914
966
|
}
|
|
1915
967
|
40%,
|
|
1916
968
|
60%,
|
|
1917
969
|
80% {
|
|
1918
|
-
|
|
1919
|
-
transform: scale(1.1) rotate(-3deg);
|
|
970
|
+
transform: scale(1.1) rotate(-3deg);
|
|
1920
971
|
}
|
|
1921
972
|
100% {
|
|
1922
|
-
|
|
1923
|
-
transform: scale(1) rotate(0);
|
|
973
|
+
transform: scale(1) rotate(0);
|
|
1924
974
|
}
|
|
1925
975
|
}
|
|
1926
976
|
|
|
1927
977
|
/* Pulse */
|
|
1928
|
-
@-webkit-keyframes pulse {
|
|
1929
|
-
0% {
|
|
1930
|
-
-webkit-transform: scale(1);
|
|
1931
|
-
transform: scale(1);
|
|
1932
|
-
opacity: 1;
|
|
1933
|
-
}
|
|
1934
|
-
50% {
|
|
1935
|
-
-webkit-transform: scale(0.9);
|
|
1936
|
-
transform: scale(0.9);
|
|
1937
|
-
opacity: 0.7;
|
|
1938
|
-
}
|
|
1939
|
-
100% {
|
|
1940
|
-
-webkit-transform: scale(1);
|
|
1941
|
-
transform: scale(1);
|
|
1942
|
-
opacity: 1;
|
|
1943
|
-
}
|
|
1944
|
-
}
|
|
1945
978
|
@keyframes pulse {
|
|
1946
979
|
0% {
|
|
1947
|
-
|
|
1948
|
-
transform: scale(1);
|
|
980
|
+
transform: scale(1);
|
|
1949
981
|
opacity: 1;
|
|
1950
982
|
}
|
|
1951
983
|
50% {
|
|
1952
|
-
|
|
1953
|
-
transform: scale(0.9);
|
|
984
|
+
transform: scale(0.9);
|
|
1954
985
|
opacity: 0.7;
|
|
1955
986
|
}
|
|
1956
987
|
100% {
|
|
1957
|
-
|
|
1958
|
-
transform: scale(1);
|
|
988
|
+
transform: scale(1);
|
|
1959
989
|
opacity: 1;
|
|
1960
990
|
}
|
|
1961
991
|
}
|
|
1962
992
|
|
|
1963
993
|
/* Jiggle */
|
|
1964
|
-
@-webkit-keyframes jiggle {
|
|
1965
|
-
0% {
|
|
1966
|
-
-webkit-transform: scale3d(1, 1, 1);
|
|
1967
|
-
transform: scale3d(1, 1, 1);
|
|
1968
|
-
}
|
|
1969
|
-
30% {
|
|
1970
|
-
-webkit-transform: scale3d(1.25, 0.75, 1);
|
|
1971
|
-
transform: scale3d(1.25, 0.75, 1);
|
|
1972
|
-
}
|
|
1973
|
-
40% {
|
|
1974
|
-
-webkit-transform: scale3d(0.75, 1.25, 1);
|
|
1975
|
-
transform: scale3d(0.75, 1.25, 1);
|
|
1976
|
-
}
|
|
1977
|
-
50% {
|
|
1978
|
-
-webkit-transform: scale3d(1.15, 0.85, 1);
|
|
1979
|
-
transform: scale3d(1.15, 0.85, 1);
|
|
1980
|
-
}
|
|
1981
|
-
65% {
|
|
1982
|
-
-webkit-transform: scale3d(0.95, 1.05, 1);
|
|
1983
|
-
transform: scale3d(0.95, 1.05, 1);
|
|
1984
|
-
}
|
|
1985
|
-
75% {
|
|
1986
|
-
-webkit-transform: scale3d(1.05, 0.95, 1);
|
|
1987
|
-
transform: scale3d(1.05, 0.95, 1);
|
|
1988
|
-
}
|
|
1989
|
-
100% {
|
|
1990
|
-
-webkit-transform: scale3d(1, 1, 1);
|
|
1991
|
-
transform: scale3d(1, 1, 1);
|
|
1992
|
-
}
|
|
1993
|
-
}
|
|
1994
994
|
@keyframes jiggle {
|
|
1995
995
|
0% {
|
|
1996
|
-
|
|
1997
|
-
transform: scale3d(1, 1, 1);
|
|
996
|
+
transform: scale3d(1, 1, 1);
|
|
1998
997
|
}
|
|
1999
998
|
30% {
|
|
2000
|
-
|
|
2001
|
-
transform: scale3d(1.25, 0.75, 1);
|
|
999
|
+
transform: scale3d(1.25, 0.75, 1);
|
|
2002
1000
|
}
|
|
2003
1001
|
40% {
|
|
2004
|
-
|
|
2005
|
-
transform: scale3d(0.75, 1.25, 1);
|
|
1002
|
+
transform: scale3d(0.75, 1.25, 1);
|
|
2006
1003
|
}
|
|
2007
1004
|
50% {
|
|
2008
|
-
|
|
2009
|
-
transform: scale3d(1.15, 0.85, 1);
|
|
1005
|
+
transform: scale3d(1.15, 0.85, 1);
|
|
2010
1006
|
}
|
|
2011
1007
|
65% {
|
|
2012
|
-
|
|
2013
|
-
transform: scale3d(0.95, 1.05, 1);
|
|
1008
|
+
transform: scale3d(0.95, 1.05, 1);
|
|
2014
1009
|
}
|
|
2015
1010
|
75% {
|
|
2016
|
-
|
|
2017
|
-
transform: scale3d(1.05, 0.95, 1);
|
|
1011
|
+
transform: scale3d(1.05, 0.95, 1);
|
|
2018
1012
|
}
|
|
2019
1013
|
100% {
|
|
2020
|
-
|
|
2021
|
-
transform: scale3d(1, 1, 1);
|
|
1014
|
+
transform: scale3d(1, 1, 1);
|
|
2022
1015
|
}
|
|
2023
1016
|
}
|
|
2024
1017
|
|
|
2025
1018
|
/* Glow */
|
|
2026
|
-
@-webkit-keyframes glow {
|
|
2027
|
-
0% {
|
|
2028
|
-
background-color: #FCFCFD;
|
|
2029
|
-
}
|
|
2030
|
-
30% {
|
|
2031
|
-
background-color: #FFF6CD;
|
|
2032
|
-
}
|
|
2033
|
-
100% {
|
|
2034
|
-
background-color: #FCFCFD;
|
|
2035
|
-
}
|
|
2036
|
-
}
|
|
2037
1019
|
@keyframes glow {
|
|
2038
1020
|
0% {
|
|
2039
|
-
background-color: #
|
|
1021
|
+
background-color: #fcfcfd;
|
|
2040
1022
|
}
|
|
2041
1023
|
30% {
|
|
2042
|
-
background-color: #
|
|
1024
|
+
background-color: #fff6cd;
|
|
2043
1025
|
}
|
|
2044
1026
|
100% {
|
|
2045
|
-
background-color: #
|
|
1027
|
+
background-color: #fcfcfd;
|
|
2046
1028
|
}
|
|
2047
1029
|
}
|
|
2048
1030
|
|