316. Araxis Merge File Comparison Report

Produced by Araxis Merge on 2021-07-21 10:22:22 +0000. See www.araxis.com for information about Merge. This report uses XHTML and CSS2, and is best viewed with a modern standards-compliant browser. For optimum results when printing this report, use landscape orientation and enable printing of background images and colours in your browser.

316.1 Files compared

#LocationFileLast Modified
1/Applications/Ampps/www/Porto v4.0.0/Theme Files/Magento 2.x/Porto Theme/pub/media/porto/web/cssanimate.optimized.css2017-12-09 23:30:02 +0000
2/Applications/Ampps/www/Porto v4.0.1/Theme Files/Magento 2.x/Porto Theme/pub/media/porto/web/cssanimate.optimized.css2017-12-09 23:30:02 +0000

316.2 Comparison summary

DescriptionBetween
Files 1 and 2
Text BlocksLines
Unchanged11072
Changed00
Inserted00
Removed00

316.3 Comparison options

WhitespaceConsecutive whitespace is treated as a single space
Character caseDifferences in character case are significant
Line endingsDifferences in line endings (CR and LF characters) are ignored
CR/LF charactersNot shown in the comparison detail
Active line-pairing rules

316.4 Active regular expressions

No regular expressions were active.

316.5 Comparison detail

1 @charset "UTF-8"; 1 @charset "UTF-8";
2  2 
3  3 
4 /*! 4 /*!
5 Animate.css - http://daneden.me/animate 5 Animate.css - http://daneden.me/animate
6 Licensed under the MIT license 6 Licensed under the MIT license
7  7 
8 Copyright (c) 2013 Daniel Eden 8 Copyright (c) 2013 Daniel Eden
9  9 
10 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 10 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
11  11 
12 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 12 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
13  13 
14 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 14 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
15 */ 15 */
16  16 
17 .animated { 17 .animated {
18   -webkit-animation-duration: 1s; 18   -webkit-animation-duration: 1s;
19   animation-duration: 1s; 19   animation-duration: 1s;
20   -webkit-animation-fill-mode: both; 20   -webkit-animation-fill-mode: both;
21   animation-fill-mode: both; 21   animation-fill-mode: both;
22 } 22 }
23  23 
24 .animated.hinge { 24 .animated.hinge {
25   -webkit-animation-duration: 2s; 25   -webkit-animation-duration: 2s;
26   animation-duration: 2s; 26   animation-duration: 2s;
27 } 27 }
28  28 
29 @-webkit-keyframes bounceInDown { 29 @-webkit-keyframes bounceInDown {
30   0% { 30   0% {
31     opacity: 0; 31     opacity: 0;
32     -webkit-transform: translateY(-2000px); 32     -webkit-transform: translateY(-2000px);
33     transform: translateY(-2000px); 33     transform: translateY(-2000px);
34   } 34   }
35  35 
36   60% { 36   60% {
37     opacity: 1; 37     opacity: 1;
38     -webkit-transform: translateY(30px); 38     -webkit-transform: translateY(30px);
39     transform: translateY(30px); 39     transform: translateY(30px);
40   } 40   }
41  41 
42   80% { 42   80% {
43     -webkit-transform: translateY(-10px); 43     -webkit-transform: translateY(-10px);
44     transform: translateY(-10px); 44     transform: translateY(-10px);
45   } 45   }
46  46 
47   100% { 47   100% {
48     -webkit-transform: translateY(0); 48     -webkit-transform: translateY(0);
49     transform: translateY(0); 49     transform: translateY(0);
50   } 50   }
51 } 51 }
52  52 
53 @keyframes bounceInDown { 53 @keyframes bounceInDown {
54   0% { 54   0% {
55     opacity: 0; 55     opacity: 0;
56     -webkit-transform: translateY(-2000px); 56     -webkit-transform: translateY(-2000px);
57     -ms-transform: translateY(-2000px); 57     -ms-transform: translateY(-2000px);
58     transform: translateY(-2000px); 58     transform: translateY(-2000px);
59   } 59   }
60  60 
61   60% { 61   60% {
62     opacity: 1; 62     opacity: 1;
63     -webkit-transform: translateY(30px); 63     -webkit-transform: translateY(30px);
64     -ms-transform: translateY(30px); 64     -ms-transform: translateY(30px);
65     transform: translateY(30px); 65     transform: translateY(30px);
66   } 66   }
67  67 
68   80% { 68   80% {
69     -webkit-transform: translateY(-10px); 69     -webkit-transform: translateY(-10px);
70     -ms-transform: translateY(-10px); 70     -ms-transform: translateY(-10px);
71     transform: translateY(-10px); 71     transform: translateY(-10px);
72   } 72   }
73  73 
74   100% { 74   100% {
75     -webkit-transform: translateY(0); 75     -webkit-transform: translateY(0);
76     -ms-transform: translateY(0); 76     -ms-transform: translateY(0);
77     transform: translateY(0); 77     transform: translateY(0);
78   } 78   }
79 } 79 }
80  80 
81 .bounceInDown { 81 .bounceInDown {
82   -webkit-animation-name: bounceInDown; 82   -webkit-animation-name: bounceInDown;
83   animation-name: bounceInDown; 83   animation-name: bounceInDown;
84 } 84 }
85  85 
86 @-webkit-keyframes bounceInLeft { 86 @-webkit-keyframes bounceInLeft {
87   0% { 87   0% {
88     opacity: 0; 88     opacity: 0;
89     -webkit-transform: translateX(-2000px); 89     -webkit-transform: translateX(-2000px);
90     transform: translateX(-2000px); 90     transform: translateX(-2000px);
91   } 91   }
92  92 
93   60% { 93   60% {
94     opacity: 1; 94     opacity: 1;
95     -webkit-transform: translateX(30px); 95     -webkit-transform: translateX(30px);
96     transform: translateX(30px); 96     transform: translateX(30px);
97   } 97   }
98  98 
99   80% { 99   80% {
100     -webkit-transform: translateX(-10px); 100     -webkit-transform: translateX(-10px);
101     transform: translateX(-10px); 101     transform: translateX(-10px);
102   } 102   }
103  103 
104   100% { 104   100% {
105     -webkit-transform: translateX(0); 105     -webkit-transform: translateX(0);
106     transform: translateX(0); 106     transform: translateX(0);
107   } 107   }
108 } 108 }
109  109 
110 @keyframes bounceInLeft { 110 @keyframes bounceInLeft {
111   0% { 111   0% {
112     opacity: 0; 112     opacity: 0;
113     -webkit-transform: translateX(-2000px); 113     -webkit-transform: translateX(-2000px);
114     -ms-transform: translateX(-2000px); 114     -ms-transform: translateX(-2000px);
115     transform: translateX(-2000px); 115     transform: translateX(-2000px);
116   } 116   }
117  117 
118   60% { 118   60% {
119     opacity: 1; 119     opacity: 1;
120     -webkit-transform: translateX(30px); 120     -webkit-transform: translateX(30px);
121     -ms-transform: translateX(30px); 121     -ms-transform: translateX(30px);
122     transform: translateX(30px); 122     transform: translateX(30px);
123   } 123   }
124  124 
125   80% { 125   80% {
126     -webkit-transform: translateX(-10px); 126     -webkit-transform: translateX(-10px);
127     -ms-transform: translateX(-10px); 127     -ms-transform: translateX(-10px);
128     transform: translateX(-10px); 128     transform: translateX(-10px);
129   } 129   }
130  130 
131   100% { 131   100% {
132     -webkit-transform: translateX(0); 132     -webkit-transform: translateX(0);
133     -ms-transform: translateX(0); 133     -ms-transform: translateX(0);
134     transform: translateX(0); 134     transform: translateX(0);
135   } 135   }
136 } 136 }
137  137 
138 .bounceInLeft { 138 .bounceInLeft {
139   -webkit-animation-name: bounceInLeft; 139   -webkit-animation-name: bounceInLeft;
140   animation-name: bounceInLeft; 140   animation-name: bounceInLeft;
141 } 141 }
142  142 
143 @-webkit-keyframes bounceInRight { 143 @-webkit-keyframes bounceInRight {
144   0% { 144   0% {
145     opacity: 0; 145     opacity: 0;
146     -webkit-transform: translateX(2000px); 146     -webkit-transform: translateX(2000px);
147     transform: translateX(2000px); 147     transform: translateX(2000px);
148   } 148   }
149  149 
150   60% { 150   60% {
151     opacity: 1; 151     opacity: 1;
152     -webkit-transform: translateX(-30px); 152     -webkit-transform: translateX(-30px);
153     transform: translateX(-30px); 153     transform: translateX(-30px);
154   } 154   }
155  155 
156   80% { 156   80% {
157     -webkit-transform: translateX(10px); 157     -webkit-transform: translateX(10px);
158     transform: translateX(10px); 158     transform: translateX(10px);
159   } 159   }
160  160 
161   100% { 161   100% {
162     -webkit-transform: translateX(0); 162     -webkit-transform: translateX(0);
163     transform: translateX(0); 163     transform: translateX(0);
164   } 164   }
165 } 165 }
166  166 
167 @keyframes bounceInRight { 167 @keyframes bounceInRight {
168   0% { 168   0% {
169     opacity: 0; 169     opacity: 0;
170     -webkit-transform: translateX(2000px); 170     -webkit-transform: translateX(2000px);
171     -ms-transform: translateX(2000px); 171     -ms-transform: translateX(2000px);
172     transform: translateX(2000px); 172     transform: translateX(2000px);
173   } 173   }
174  174 
175   60% { 175   60% {
176     opacity: 1; 176     opacity: 1;
177     -webkit-transform: translateX(-30px); 177     -webkit-transform: translateX(-30px);
178     -ms-transform: translateX(-30px); 178     -ms-transform: translateX(-30px);
179     transform: translateX(-30px); 179     transform: translateX(-30px);
180   } 180   }
181  181 
182   80% { 182   80% {
183     -webkit-transform: translateX(10px); 183     -webkit-transform: translateX(10px);
184     -ms-transform: translateX(10px); 184     -ms-transform: translateX(10px);
185     transform: translateX(10px); 185     transform: translateX(10px);
186   } 186   }
187  187 
188   100% { 188   100% {
189     -webkit-transform: translateX(0); 189     -webkit-transform: translateX(0);
190     -ms-transform: translateX(0); 190     -ms-transform: translateX(0);
191     transform: translateX(0); 191     transform: translateX(0);
192   } 192   }
193 } 193 }
194  194 
195 .bounceInRight { 195 .bounceInRight {
196   -webkit-animation-name: bounceInRight; 196   -webkit-animation-name: bounceInRight;
197   animation-name: bounceInRight; 197   animation-name: bounceInRight;
198 } 198 }
199  199 
200 @-webkit-keyframes fadeIn { 200 @-webkit-keyframes fadeIn {
201   0% { 201   0% {
202     opacity: 0; 202     opacity: 0;
203   } 203   }
204  204 
205   100% { 205   100% {
206     opacity: 1; 206     opacity: 1;
207   } 207   }
208 } 208 }
209  209 
210 @keyframes fadeIn { 210 @keyframes fadeIn {
211   0% { 211   0% {
212     opacity: 0; 212     opacity: 0;
213   } 213   }
214  214 
215   100% { 215   100% {
216     opacity: 1; 216     opacity: 1;
217   } 217   }
218 } 218 }
219  219 
220 .fadeIn { 220 .fadeIn {
221   -webkit-animation-name: fadeIn; 221   -webkit-animation-name: fadeIn;
222   animation-name: fadeIn; 222   animation-name: fadeIn;
223 } 223 }
224  224 
225 @-webkit-keyframes fadeInDown { 225 @-webkit-keyframes fadeInDown {
226   0% { 226   0% {
227     opacity: 0; 227     opacity: 0;
228     -webkit-transform: translateY(-20px); 228     -webkit-transform: translateY(-20px);
229     transform: translateY(-20px); 229     transform: translateY(-20px);
230   } 230   }
231  231 
232   100% { 232   100% {
233     opacity: 1; 233     opacity: 1;
234     -webkit-transform: translateY(0); 234     -webkit-transform: translateY(0);
235     transform: translateY(0); 235     transform: translateY(0);
236   } 236   }
237 } 237 }
238  238 
239 @-webkit-keyframes fadeInLeft { 239 @-webkit-keyframes fadeInLeft {
240   0% { 240   0% {
241     opacity: 0; 241     opacity: 0;
242     -webkit-transform: translateX(-20px); 242     -webkit-transform: translateX(-20px);
243     transform: translateX(-20px); 243     transform: translateX(-20px);
244   } 244   }
245  245 
246   100% { 246   100% {
247     opacity: 1; 247     opacity: 1;
248     -webkit-transform: translateX(0); 248     -webkit-transform: translateX(0);
249     transform: translateX(0); 249     transform: translateX(0);
250   } 250   }
251 } 251 }
252  252 
253 @keyframes fadeInLeft { 253 @keyframes fadeInLeft {
254   0% { 254   0% {
255     opacity: 0; 255     opacity: 0;
256     -webkit-transform: translateX(-20px); 256     -webkit-transform: translateX(-20px);
257     -ms-transform: translateX(-20px); 257     -ms-transform: translateX(-20px);
258     transform: translateX(-20px); 258     transform: translateX(-20px);
259   } 259   }
260  260 
261   100% { 261   100% {
262     opacity: 1; 262     opacity: 1;
263     -webkit-transform: translateX(0); 263     -webkit-transform: translateX(0);
264     -ms-transform: translateX(0); 264     -ms-transform: translateX(0);
265     transform: translateX(0); 265     transform: translateX(0);
266   } 266   }
267 } 267 }
268  268 
269 .fadeInLeft { 269 .fadeInLeft {
270   -webkit-animation-name: fadeInLeft; 270   -webkit-animation-name: fadeInLeft;
271   animation-name: fadeInLeft; 271   animation-name: fadeInLeft;
272 } 272 }
273  273 
274 @-webkit-keyframes fadeInRight { 274 @-webkit-keyframes fadeInRight {
275   0% { 275   0% {
276     opacity: 0; 276     opacity: 0;
277     -webkit-transform: translateX(20px); 277     -webkit-transform: translateX(20px);
278     transform: translateX(20px); 278     transform: translateX(20px);
279   } 279   }
280  280 
281   100% { 281   100% {
282     opacity: 1; 282     opacity: 1;
283     -webkit-transform: translateX(0); 283     -webkit-transform: translateX(0);
284     transform: translateX(0); 284     transform: translateX(0);
285   } 285   }
286 } 286 }
287  287 
288 @keyframes fadeInRight { 288 @keyframes fadeInRight {
289   0% { 289   0% {
290     opacity: 0; 290     opacity: 0;
291     -webkit-transform: translateX(20px); 291     -webkit-transform: translateX(20px);
292     -ms-transform: translateX(20px); 292     -ms-transform: translateX(20px);
293     transform: translateX(20px); 293     transform: translateX(20px);
294   } 294   }
295  295 
296   100% { 296   100% {
297     opacity: 1; 297     opacity: 1;
298     -webkit-transform: translateX(0); 298     -webkit-transform: translateX(0);
299     -ms-transform: translateX(0); 299     -ms-transform: translateX(0);
300     transform: translateX(0); 300     transform: translateX(0);
301   } 301   }
302 } 302 }
303  303 
304 .fadeInRight { 304 .fadeInRight {
305   -webkit-animation-name: fadeInRight; 305   -webkit-animation-name: fadeInRight;
306   animation-name: fadeInRight; 306   animation-name: fadeInRight;
307 } 307 }
308  308 
309 @-webkit-keyframes flip { 309 @-webkit-keyframes flip {
310   0% { 310   0% {
311     -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 311     -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
312     transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 312     transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
313     -webkit-animation-timing-function: ease-out; 313     -webkit-animation-timing-function: ease-out;
314     animation-timing-function: ease-out; 314     animation-timing-function: ease-out;
315   } 315   }
316  316 
317   40% { 317   40% {
318     -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 318     -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
319     transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 319     transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
320     -webkit-animation-timing-function: ease-out; 320     -webkit-animation-timing-function: ease-out;
321     animation-timing-function: ease-out; 321     animation-timing-function: ease-out;
322   } 322   }
323  323 
324   50% { 324   50% {
325     -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 325     -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
326     transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 326     transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
327     -webkit-animation-timing-function: ease-in; 327     -webkit-animation-timing-function: ease-in;
328     animation-timing-function: ease-in; 328     animation-timing-function: ease-in;
329   } 329   }
330  330 
331   80% { 331   80% {
332     -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 332     -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
333     transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 333     transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
334     -webkit-animation-timing-function: ease-in; 334     -webkit-animation-timing-function: ease-in;
335     animation-timing-function: ease-in; 335     animation-timing-function: ease-in;
336   } 336   }
337  337 
338   100% { 338   100% {
339     -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 339     -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
340     transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 340     transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
341     -webkit-animation-timing-function: ease-in; 341     -webkit-animation-timing-function: ease-in;
342     animation-timing-function: ease-in; 342     animation-timing-function: ease-in;
343   } 343   }
344 } 344 }
345  345 
346 @keyframes flip { 346 @keyframes flip {
347   0% { 347   0% {
348     -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 348     -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
349     -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 349     -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
350     transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 350     transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
351     -webkit-animation-timing-function: ease-out; 351     -webkit-animation-timing-function: ease-out;
352     animation-timing-function: ease-out; 352     animation-timing-function: ease-out;
353   } 353   }
354  354 
355   40% { 355   40% {
356     -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 356     -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
357     -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 357     -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
358     transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 358     transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
359     -webkit-animation-timing-function: ease-out; 359     -webkit-animation-timing-function: ease-out;
360     animation-timing-function: ease-out; 360     animation-timing-function: ease-out;
361   } 361   }
362  362 
363   50% { 363   50% {
364     -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 364     -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
365     -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 365     -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
366     transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 366     transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
367     -webkit-animation-timing-function: ease-in; 367     -webkit-animation-timing-function: ease-in;
368     animation-timing-function: ease-in; 368     animation-timing-function: ease-in;
369   } 369   }
370  370 
371   80% { 371   80% {
372     -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 372     -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
373     -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 373     -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
374     transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 374     transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
375     -webkit-animation-timing-function: ease-in; 375     -webkit-animation-timing-function: ease-in;
376     animation-timing-function: ease-in; 376     animation-timing-function: ease-in;
377   } 377   }
378  378 
379   100% { 379   100% {
380     -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 380     -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
381     -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 381     -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
382     transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 382     transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
383     -webkit-animation-timing-function: ease-in; 383     -webkit-animation-timing-function: ease-in;
384     animation-timing-function: ease-in; 384     animation-timing-function: ease-in;
385   } 385   }
386 } 386 }
387  387 
388 .animated.flip { 388 .animated.flip {
389   -webkit-backface-visibility: visible; 389   -webkit-backface-visibility: visible;
390   -ms-backface-visibility: visible; 390   -ms-backface-visibility: visible;
391   backface-visibility: visible; 391   backface-visibility: visible;
392   -webkit-animation-name: flip; 392   -webkit-animation-name: flip;
393   animation-name: flip; 393   animation-name: flip;
394 } 394 }
395  395 
396 @-webkit-keyframes flipInY { 396 @-webkit-keyframes flipInY {
397   0% { 397   0% {
398     -webkit-transform: perspective(400px) rotateY(90deg); 398     -webkit-transform: perspective(400px) rotateY(90deg);
399     transform: perspective(400px) rotateY(90deg); 399     transform: perspective(400px) rotateY(90deg);
400     opacity: 0; 400     opacity: 0;
401   } 401   }
402  402 
403   40% { 403   40% {
404     -webkit-transform: perspective(400px) rotateY(-10deg); 404     -webkit-transform: perspective(400px) rotateY(-10deg);
405     transform: perspective(400px) rotateY(-10deg); 405     transform: perspective(400px) rotateY(-10deg);
406   } 406   }
407  407 
408   70% { 408   70% {
409     -webkit-transform: perspective(400px) rotateY(10deg); 409     -webkit-transform: perspective(400px) rotateY(10deg);
410     transform: perspective(400px) rotateY(10deg); 410     transform: perspective(400px) rotateY(10deg);
411   } 411   }
412  412 
413   100% { 413   100% {
414     -webkit-transform: perspective(400px) rotateY(0deg); 414     -webkit-transform: perspective(400px) rotateY(0deg);
415     transform: perspective(400px) rotateY(0deg); 415     transform: perspective(400px) rotateY(0deg);
416     opacity: 1; 416     opacity: 1;
417   } 417   }
418 } 418 }
419  419 
420 @keyframes flipInY { 420 @keyframes flipInY {
421   0% { 421   0% {
422     -webkit-transform: perspective(400px) rotateY(90deg); 422     -webkit-transform: perspective(400px) rotateY(90deg);
423     -ms-transform: perspective(400px) rotateY(90deg); 423     -ms-transform: perspective(400px) rotateY(90deg);
424     transform: perspective(400px) rotateY(90deg); 424     transform: perspective(400px) rotateY(90deg);
425     opacity: 0; 425     opacity: 0;
426   } 426   }
427  427 
428   40% { 428   40% {
429     -webkit-transform: perspective(400px) rotateY(-10deg); 429     -webkit-transform: perspective(400px) rotateY(-10deg);
430     -ms-transform: perspective(400px) rotateY(-10deg); 430     -ms-transform: perspective(400px) rotateY(-10deg);
431     transform: perspective(400px) rotateY(-10deg); 431     transform: perspective(400px) rotateY(-10deg);
432   } 432   }
433  433 
434   70% { 434   70% {
435     -webkit-transform: perspective(400px) rotateY(10deg); 435     -webkit-transform: perspective(400px) rotateY(10deg);
436     -ms-transform: perspective(400px) rotateY(10deg); 436     -ms-transform: perspective(400px) rotateY(10deg);
437     transform: perspective(400px) rotateY(10deg); 437     transform: perspective(400px) rotateY(10deg);
438   } 438   }
439  439 
440   100% { 440   100% {
441     -webkit-transform: perspective(400px) rotateY(0deg); 441     -webkit-transform: perspective(400px) rotateY(0deg);
442     -ms-transform: perspective(400px) rotateY(0deg); 442     -ms-transform: perspective(400px) rotateY(0deg);
443     transform: perspective(400px) rotateY(0deg); 443     transform: perspective(400px) rotateY(0deg);
444     opacity: 1; 444     opacity: 1;
445   } 445   }
446 } 446 }
447  447 
448 .flipInY { 448 .flipInY {
449   -webkit-backface-visibility: visible !important; 449   -webkit-backface-visibility: visible !important;
450   -ms-backface-visibility: visible !important; 450   -ms-backface-visibility: visible !important;
451   backface-visibility: visible !important; 451   backface-visibility: visible !important;
452   -webkit-animation-name: flipInY; 452   -webkit-animation-name: flipInY;
453   animation-name: flipInY; 453   animation-name: flipInY;
454 } 454 }
455  455 
456 @keyframes lightSpeedIn { 456 @keyframes lightSpeedIn {
457   0% { 457   0% {
458     -webkit-transform: translateX(100%) skewX(-30deg); 458     -webkit-transform: translateX(100%) skewX(-30deg);
459     -ms-transform: translateX(100%) skewX(-30deg); 459     -ms-transform: translateX(100%) skewX(-30deg);
460     transform: translateX(100%) skewX(-30deg); 460     transform: translateX(100%) skewX(-30deg);
461     opacity: 0; 461     opacity: 0;
462   } 462   }
463  463 
464   60% { 464   60% {
465     -webkit-transform: translateX(-20%) skewX(30deg); 465     -webkit-transform: translateX(-20%) skewX(30deg);
466     -ms-transform: translateX(-20%) skewX(30deg); 466     -ms-transform: translateX(-20%) skewX(30deg);
467     transform: translateX(-20%) skewX(30deg); 467     transform: translateX(-20%) skewX(30deg);
468     opacity: 1; 468     opacity: 1;
469   } 469   }
470  470 
471   80% { 471   80% {
472     -webkit-transform: translateX(0%) skewX(-15deg); 472     -webkit-transform: translateX(0%) skewX(-15deg);
473     -ms-transform: translateX(0%) skewX(-15deg); 473     -ms-transform: translateX(0%) skewX(-15deg);
474     transform: translateX(0%) skewX(-15deg); 474     transform: translateX(0%) skewX(-15deg);
475     opacity: 1; 475     opacity: 1;
476   } 476   }
477  477 
478   100% { 478   100% {
479     -webkit-transform: translateX(0%) skewX(0deg); 479     -webkit-transform: translateX(0%) skewX(0deg);
480     -ms-transform: translateX(0%) skewX(0deg); 480     -ms-transform: translateX(0%) skewX(0deg);
481     transform: translateX(0%) skewX(0deg); 481     transform: translateX(0%) skewX(0deg);
482     opacity: 1; 482     opacity: 1;
483   } 483   }
484 } 484 }
485  485 
486 .lightSpeedIn { 486 .lightSpeedIn {
487   -webkit-animation-name: lightSpeedIn; 487   -webkit-animation-name: lightSpeedIn;
488   animation-name: lightSpeedIn; 488   animation-name: lightSpeedIn;
489   -webkit-animation-timing-function: ease-out; 489   -webkit-animation-timing-function: ease-out;
490   animation-timing-function: ease-out; 490   animation-timing-function: ease-out;
491 } 491 }
492  492 
493 @-webkit-keyframes rotateIn { 493 @-webkit-keyframes rotateIn {
494   0% { 494   0% {
495     -webkit-transform-origin: center center; 495     -webkit-transform-origin: center center;
496     transform-origin: center center; 496     transform-origin: center center;
497     -webkit-transform: rotate(-200deg); 497     -webkit-transform: rotate(-200deg);
498     transform: rotate(-200deg); 498     transform: rotate(-200deg);
499     opacity: 0; 499     opacity: 0;
500   } 500   }
501  501 
502   100% { 502   100% {
503     -webkit-transform-origin: center center; 503     -webkit-transform-origin: center center;
504     transform-origin: center center; 504     transform-origin: center center;
505     -webkit-transform: rotate(0); 505     -webkit-transform: rotate(0);
506     transform: rotate(0); 506     transform: rotate(0);
507     opacity: 1; 507     opacity: 1;
508   } 508   }
509 } 509 }
510  510 
511 @keyframes rotateIn { 511 @keyframes rotateIn {
512   0% { 512   0% {
513     -webkit-transform-origin: center center; 513     -webkit-transform-origin: center center;
514     -ms-transform-origin: center center; 514     -ms-transform-origin: center center;
515     transform-origin: center center; 515     transform-origin: center center;
516     -webkit-transform: rotate(-200deg); 516     -webkit-transform: rotate(-200deg);
517     -ms-transform: rotate(-200deg); 517     -ms-transform: rotate(-200deg);
518     transform: rotate(-200deg); 518     transform: rotate(-200deg);
519     opacity: 0; 519     opacity: 0;
520   } 520   }
521  521 
522   100% { 522   100% {
523     -webkit-transform-origin: center center; 523     -webkit-transform-origin: center center;
524     -ms-transform-origin: center center; 524     -ms-transform-origin: center center;
525     transform-origin: center center; 525     transform-origin: center center;
526     -webkit-transform: rotate(0); 526     -webkit-transform: rotate(0);
527     -ms-transform: rotate(0); 527     -ms-transform: rotate(0);
528     transform: rotate(0); 528     transform: rotate(0);
529     opacity: 1; 529     opacity: 1;
530   } 530   }
531 } 531 }
532  532 
533 .rotateIn { 533 .rotateIn {
534   -webkit-animation-name: rotateIn; 534   -webkit-animation-name: rotateIn;
535   animation-name: rotateIn; 535   animation-name: rotateIn;
536 } 536 }