|
1 | 1 | @include export-module('base-animation') {
|
| 2 | + |
2 | 3 | /*! animation keyframes */
|
3 | 4 | @keyframes SlideLeftOut {
|
4 | 5 | from {
|
|
132 | 133 | }
|
133 | 134 | @keyframes ZoomIn {
|
134 | 135 | from {
|
135 |
| - transform: translate(0, 0)scale(0); |
| 136 | + transform: translate(0, 0) scale(0); |
136 | 137 | }
|
137 | 138 |
|
138 | 139 | to {
|
139 |
| - transform: translate(0, 0)scale(1); |
| 140 | + transform: translate(0, 0) scale(1); |
140 | 141 | }
|
141 | 142 | }
|
142 | 143 | @keyframes ZoomOut {
|
143 | 144 | from {
|
144 |
| - transform: translate(0, 0)scale(1); |
| 145 | + transform: translate(0, 0) scale(1); |
145 | 146 | }
|
146 | 147 |
|
147 | 148 | to {
|
148 |
| - transform: translate(0, 0)scale(0); |
| 149 | + transform: translate(0, 0) scale(0); |
149 | 150 | }
|
150 | 151 | }
|
151 | 152 | @keyframes FadeZoomIn {
|
|
176 | 177 | }
|
177 | 178 | @keyframes FlipRightDownIn {
|
178 | 179 | from {
|
179 |
| - transform: perspective(400px)rotateY(-180deg); |
| 180 | + transform: perspective(400px) rotateY(-180deg); |
180 | 181 | transform-origin: right center;
|
181 | 182 | transform-style: preserve-3d;
|
182 | 183 | }
|
|
189 | 190 | }
|
190 | 191 | @keyframes FlipRightDownOut {
|
191 | 192 | from {
|
192 |
| - transform: perspective(400px)rotateY(0deg); |
| 193 | + transform: perspective(400px) rotateY(0deg); |
193 | 194 | transform-origin: right center;
|
194 | 195 | transform-style: preserve-3d;
|
195 | 196 | }
|
|
202 | 203 | }
|
203 | 204 | @keyframes FlipRightUpIn {
|
204 | 205 | from {
|
205 |
| - transform: perspective(400px)rotateY(135deg); |
| 206 | + transform: perspective(400px) rotateY(135deg); |
206 | 207 | transform-origin: right center;
|
207 | 208 | transform-style: preserve-3d;
|
208 | 209 | }
|
|
215 | 216 | }
|
216 | 217 | @keyframes FlipRightUpOut {
|
217 | 218 | from {
|
218 |
| - transform: perspective(400px)rotateY(0deg); |
| 219 | + transform: perspective(400px) rotateY(0deg); |
219 | 220 | transform-origin: right center;
|
220 | 221 | transform-style: preserve-3d;
|
221 | 222 | }
|
|
228 | 229 | }
|
229 | 230 | @keyframes FlipLeftDownIn {
|
230 | 231 | from {
|
231 |
| - transform: perspective(400px)rotateY(-180deg); |
| 232 | + transform: perspective(400px) rotateY(-180deg); |
232 | 233 | transform-origin: left center;
|
233 | 234 | transform-style: preserve-3d;
|
234 | 235 | }
|
|
241 | 242 | }
|
242 | 243 | @keyframes FlipLeftDownOut {
|
243 | 244 | from {
|
244 |
| - transform: perspective(400px)rotateY(0deg); |
| 245 | + transform: perspective(400px) rotateY(0deg); |
245 | 246 | transform-origin: left center;
|
246 | 247 | transform-style: preserve-3d;
|
247 | 248 | }
|
|
254 | 255 | }
|
255 | 256 | @keyframes FlipLeftUpIn {
|
256 | 257 | from {
|
257 |
| - transform: perspective(400px)rotateY(-135deg); |
| 258 | + transform: perspective(400px) rotateY(-135deg); |
258 | 259 | transform-origin: left center;
|
259 | 260 | transform-style: preserve-3d;
|
260 | 261 | }
|
|
282 | 283 | from {
|
283 | 284 | filter: alpha(opacity=0);
|
284 | 285 | opacity: 0;
|
285 |
| - transform: perspective(400px)rotateY(180deg); |
| 286 | + transform: perspective(400px) rotateY(180deg); |
286 | 287 | transform-origin: center center;
|
287 | 288 | transform-style: preserve-3d;
|
288 | 289 | }
|
289 | 290 |
|
290 | 291 | 50% {
|
291 |
| - transform: perspective(700px)rotateY(90deg); |
| 292 | + transform: perspective(700px) rotateY(90deg); |
292 | 293 | }
|
293 | 294 |
|
294 | 295 | to {
|
|
303 | 304 | from {
|
304 | 305 | filter: alpha(opacity=100);
|
305 | 306 | opacity: 1;
|
306 |
| - transform: perspective(400px)rotateY(0deg); |
| 307 | + transform: perspective(400px) rotateY(0deg); |
307 | 308 | transform-origin: center center;
|
308 | 309 | transform-style: preserve-3d;
|
309 | 310 | }
|
310 | 311 |
|
311 | 312 | 50% {
|
312 |
| - transform: perspective(700px)rotateY(90deg); |
| 313 | + transform: perspective(700px) rotateY(90deg); |
313 | 314 | }
|
314 | 315 |
|
315 | 316 | 75% {
|
316 |
| - transform: perspective(850px)rotateY(125deg); |
| 317 | + transform: perspective(850px) rotateY(125deg); |
317 | 318 | }
|
318 | 319 |
|
319 | 320 | to {
|
|
328 | 329 | from {
|
329 | 330 | filter: alpha(opacity=0);
|
330 | 331 | opacity: 0;
|
331 |
| - transform: perspective(400px)rotateY(-180deg); |
| 332 | + transform: perspective(400px) rotateY(-180deg); |
332 | 333 | transform-origin: center center;
|
333 | 334 | transform-style: preserve-3d;
|
334 | 335 | }
|
335 | 336 |
|
336 | 337 | 50% {
|
337 |
| - transform: perspective(700px)rotateY(-90deg); |
| 338 | + transform: perspective(700px) rotateY(-90deg); |
338 | 339 | }
|
339 | 340 |
|
340 | 341 | to {
|
|
349 | 350 | from {
|
350 | 351 | filter: alpha(opacity=100);
|
351 | 352 | opacity: 1;
|
352 |
| - transform: perspective(400px)rotateY(0deg); |
| 353 | + transform: perspective(400px) rotateY(0deg); |
353 | 354 | transform-origin: center center;
|
354 | 355 | transform-style: preserve-3d;
|
355 | 356 | }
|
356 | 357 |
|
357 | 358 | 50% {
|
358 |
| - transform: perspective(700px)rotateY(-90deg); |
| 359 | + transform: perspective(700px) rotateY(-90deg); |
359 | 360 | }
|
360 | 361 |
|
361 | 362 | to {
|
|
370 | 371 | from {
|
371 | 372 | filter: alpha(opacity=0);
|
372 | 373 | opacity: 0;
|
373 |
| - transform: perspective(400px)rotateX(180deg); |
| 374 | + transform: perspective(400px) rotateX(180deg); |
374 | 375 | transform-origin: center center;
|
375 | 376 | transform-style: preserve-3d;
|
376 | 377 | }
|
377 | 378 |
|
378 | 379 | 50% {
|
379 |
| - transform: perspective(700px)rotateX(90deg); |
| 380 | + transform: perspective(700px) rotateX(90deg); |
380 | 381 | }
|
381 | 382 |
|
382 | 383 | to {
|
|
391 | 392 | from {
|
392 | 393 | filter: alpha(opacity=100);
|
393 | 394 | opacity: 1;
|
394 |
| - transform: perspective(400px)rotateX(0deg); |
| 395 | + transform: perspective(400px) rotateX(0deg); |
395 | 396 | transform-origin: center center;
|
396 | 397 | transform-style: preserve-3d;
|
397 | 398 | }
|
398 | 399 |
|
399 | 400 | 50% {
|
400 |
| - transform: perspective(700px)rotateX(90deg); |
| 401 | + transform: perspective(700px) rotateX(90deg); |
401 | 402 | }
|
402 | 403 |
|
403 | 404 | 75% {
|
404 |
| - transform: perspective(850px)rotateX(125deg); |
| 405 | + transform: perspective(850px) rotateX(125deg); |
405 | 406 | }
|
406 | 407 |
|
407 | 408 | to {
|
|
416 | 417 | from {
|
417 | 418 | filter: alpha(opacity=0);
|
418 | 419 | opacity: 0;
|
419 |
| - transform: perspective(400px)rotateX(-180deg); |
| 420 | + transform: perspective(400px) rotateX(-180deg); |
420 | 421 | transform-origin: center center;
|
421 | 422 | transform-style: preserve-3d;
|
422 | 423 | }
|
423 | 424 |
|
424 | 425 | 50% {
|
425 |
| - transform: perspective(700px)rotateX(-90deg); |
| 426 | + transform: perspective(700px) rotateX(-90deg); |
426 | 427 | }
|
427 | 428 |
|
428 | 429 | to {
|
|
437 | 438 | from {
|
438 | 439 | filter: alpha(opacity=100);
|
439 | 440 | opacity: 1;
|
440 |
| - transform: perspective(400px)rotateX(0deg); |
| 441 | + transform: perspective(400px) rotateX(0deg); |
441 | 442 | transform-origin: center center;
|
442 | 443 | transform-style: preserve-3d;
|
443 | 444 | }
|
444 | 445 |
|
445 | 446 | 50% {
|
446 |
| - transform: perspective(700px)rotateX(-90deg); |
| 447 | + transform: perspective(700px) rotateX(-90deg); |
447 | 448 | }
|
448 | 449 |
|
449 | 450 | to {
|
|
0 commit comments