Produced by Araxis Merge on 2024-03-04 14:39:19 +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.
| # | Location | File | Last Modified |
|---|---|---|---|
| 1 | /Users/coca/Documents/www/Porto v4.0.2/Theme Files/Magento 2.x/Porto Theme v4.0.7/pub/media/porto/web/css | animate.optimized.css | 2023-02-02 08:36:19 +0000 |
| 2 | /Users/coca/Documents/www/Porto v4.0.2/Theme Files/Magento 2.x/Porto Theme v4.0.8/pub/media/porto/web/css | animate.optimized.css | 2023-02-02 08:36:19 +0000 |
| Description | Between Files 1 and 2 | |
|---|---|---|
| Text Blocks | Lines | |
| Unchanged | 1 | 1994 |
| Changed | 0 | 0 |
| Inserted | 0 | 0 |
| Removed | 0 | 0 |
| Whitespace | Consecutive whitespace is treated as a single space |
|---|---|
| Character case | Differences in character case are significant |
| Line endings | Differences in line endings (CR and LF characters) are ignored |
| CR/LF characters | Not shown in the comparison detail |
| Active line-pairing rules |
No regular expressions were active.
| 1 | [data-appear-animation],.appear-animation { | 1 | [data-appear-animation],.appear-animation { | |||
| 2 | opacity: 0 | 2 | opacity: 0 | |||
| 3 | } | 3 | } | |||
| 4 | 4 | |||||
| 5 | .animated,.appear-animation { | 5 | .animated,.appear-animation { | |||
| 6 | animation-fill-mode: both; | 6 | animation-fill-mode: both; | |||
| 7 | animation-duration: 1s | 7 | animation-duration: 1s | |||
| 8 | } | 8 | } | |||
| 9 | 9 | |||||
| 10 | .appear-animation-visible { | 10 | .appear-animation-visible { | |||
| 11 | opacity: 1 | 11 | opacity: 1 | |||
| 12 | } | 12 | } | |||
| 13 | 13 | |||||
| 14 | @keyframes flash { | 14 | @keyframes flash { | |||
| 15 | 0%,50%,100% { | 15 | 0%,50%,100% { | |||
| 16 | opacity: 1 | 16 | opacity: 1 | |||
| 17 | } | 17 | } | |||
| 18 | 18 | |||||
| 19 | 25%,75% { | 19 | 25%,75% { | |||
| 20 | opacity: 0 | 20 | opacity: 0 | |||
| 21 | } | 21 | } | |||
| 22 | } | 22 | } | |||
| 23 | 23 | |||||
| 24 | .flash { | 24 | .flash { | |||
| 25 | animation-name: flash | 25 | animation-name: flash | |||
| 26 | } | 26 | } | |||
| 27 | 27 | |||||
| 28 | @keyframes shake { | 28 | @keyframes shake { | |||
| 29 | 0%,100% { | 29 | 0%,100% { | |||
| 30 | transform: translateX(0); | 30 | transform: translateX(0); | |||
| 31 | opacity: 1 | 31 | opacity: 1 | |||
| 32 | } | 32 | } | |||
| 33 | 33 | |||||
| 34 | 10%,30%,50%,70%,90% { | 34 | 10%,30%,50%,70%,90% { | |||
| 35 | transform: translateX(-10px) | 35 | transform: translateX(-10px) | |||
| 36 | } | 36 | } | |||
| 37 | 37 | |||||
| 38 | 20%,40%,60%,80% { | 38 | 20%,40%,60%,80% { | |||
| 39 | transform: translateX(10px) | 39 | transform: translateX(10px) | |||
| 40 | } | 40 | } | |||
| 41 | } | 41 | } | |||
| 42 | 42 | |||||
| 43 | .shake { | 43 | .shake { | |||
| 44 | animation-name: shake | 44 | animation-name: shake | |||
| 45 | } | 45 | } | |||
| 46 | 46 | |||||
| 47 | @keyframes bounce { | 47 | @keyframes bounce { | |||
| 48 | 0%,20%,50%,80%,100% { | 48 | 0%,20%,50%,80%,100% { | |||
| 49 | transform: translateY(0); | 49 | transform: translateY(0); | |||
| 50 | opacity: 1 | 50 | opacity: 1 | |||
| 51 | } | 51 | } | |||
| 52 | 52 | |||||
| 53 | 40% { | 53 | 40% { | |||
| 54 | transform: translateY(-30px) | 54 | transform: translateY(-30px) | |||
| 55 | } | 55 | } | |||
| 56 | 56 | |||||
| 57 | 60% { | 57 | 60% { | |||
| 58 | transform: translateY(-15px) | 58 | transform: translateY(-15px) | |||
| 59 | } | 59 | } | |||
| 60 | } | 60 | } | |||
| 61 | 61 | |||||
| 62 | .bounce { | 62 | .bounce { | |||
| 63 | animation-name: bounce | 63 | animation-name: bounce | |||
| 64 | } | 64 | } | |||
| 65 | 65 | |||||
| 66 | @keyframes tada { | 66 | @keyframes tada { | |||
| 67 | 0% { | 67 | 0% { | |||
| 68 | transform: scale(1) | 68 | transform: scale(1) | |||
| 69 | } | 69 | } | |||
| 70 | 70 | |||||
| 71 | 10%,20% { | 71 | 10%,20% { | |||
| 72 | transform: scale(.9) rotate(-3deg) | 72 | transform: scale(.9) rotate(-3deg) | |||
| 73 | } | 73 | } | |||
| 74 | 74 | |||||
| 75 | 30%,50%,70%,90% { | 75 | 30%,50%,70%,90% { | |||
| 76 | transform: scale(1.1) rotate(3deg) | 76 | transform: scale(1.1) rotate(3deg) | |||
| 77 | } | 77 | } | |||
| 78 | 78 | |||||
| 79 | 40%,60%,80% { | 79 | 40%,60%,80% { | |||
| 80 | transform: scale(1.1) rotate(-3deg) | 80 | transform: scale(1.1) rotate(-3deg) | |||
| 81 | } | 81 | } | |||
| 82 | 82 | |||||
| 83 | 100% { | 83 | 100% { | |||
| 84 | transform: scale(1) rotate(0); | 84 | transform: scale(1) rotate(0); | |||
| 85 | opacity: 1 | 85 | opacity: 1 | |||
| 86 | } | 86 | } | |||
| 87 | } | 87 | } | |||
| 88 | 88 | |||||
| 89 | .tada { | 89 | .tada { | |||
| 90 | animation-name: tada | 90 | animation-name: tada | |||
| 91 | } | 91 | } | |||
| 92 | 92 | |||||
| 93 | @keyframes swing { | 93 | @keyframes swing { | |||
| 94 | 20% { | 94 | 20% { | |||
| 95 | transform: rotate(15deg) | 95 | transform: rotate(15deg) | |||
| 96 | } | 96 | } | |||
| 97 | 97 | |||||
| 98 | 40% { | 98 | 40% { | |||
| 99 | transform: rotate(-10deg) | 99 | transform: rotate(-10deg) | |||
| 100 | } | 100 | } | |||
| 101 | 101 | |||||
| 102 | 60% { | 102 | 60% { | |||
| 103 | transform: rotate(5deg) | 103 | transform: rotate(5deg) | |||
| 104 | } | 104 | } | |||
| 105 | 105 | |||||
| 106 | 80% { | 106 | 80% { | |||
| 107 | transform: rotate(-5deg) | 107 | transform: rotate(-5deg) | |||
| 108 | } | 108 | } | |||
| 109 | 109 | |||||
| 110 | 100% { | 110 | 100% { | |||
| 111 | transform: rotate(0deg); | 111 | transform: rotate(0deg); | |||
| 112 | opacity: 1 | 112 | opacity: 1 | |||
| 113 | } | 113 | } | |||
| 114 | } | 114 | } | |||
| 115 | 115 | |||||
| 116 | .swing { | 116 | .swing { | |||
| 117 | transform-origin: top center; | 117 | transform-origin: top center; | |||
| 118 | animation-name: swing | 118 | animation-name: swing | |||
| 119 | } | 119 | } | |||
| 120 | 120 | |||||
| 121 | @keyframes wobble { | 121 | @keyframes wobble { | |||
| 122 | 0% { | 122 | 0% { | |||
| 123 | transform: translateX(0%) | 123 | transform: translateX(0%) | |||
| 124 | } | 124 | } | |||
| 125 | 125 | |||||
| 126 | 15% { | 126 | 15% { | |||
| 127 | transform: translateX(-25%) rotate(-5deg) | 127 | transform: translateX(-25%) rotate(-5deg) | |||
| 128 | } | 128 | } | |||
| 129 | 129 | |||||
| 130 | 30% { | 130 | 30% { | |||
| 131 | transform: translateX(20%) rotate(3deg) | 131 | transform: translateX(20%) rotate(3deg) | |||
| 132 | } | 132 | } | |||
| 133 | 133 | |||||
| 134 | 45% { | 134 | 45% { | |||
| 135 | transform: translateX(-15%) rotate(-3deg) | 135 | transform: translateX(-15%) rotate(-3deg) | |||
| 136 | } | 136 | } | |||
| 137 | 137 | |||||
| 138 | 60% { | 138 | 60% { | |||
| 139 | transform: translateX(10%) rotate(2deg) | 139 | transform: translateX(10%) rotate(2deg) | |||
| 140 | } | 140 | } | |||
| 141 | 141 | |||||
| 142 | 75% { | 142 | 75% { | |||
| 143 | transform: translateX(-5%) rotate(-1deg) | 143 | transform: translateX(-5%) rotate(-1deg) | |||
| 144 | } | 144 | } | |||
| 145 | 145 | |||||
| 146 | 100% { | 146 | 100% { | |||
| 147 | transform: translateX(0%); | 147 | transform: translateX(0%); | |||
| 148 | opacity: 1 | 148 | opacity: 1 | |||
| 149 | } | 149 | } | |||
| 150 | } | 150 | } | |||
| 151 | 151 | |||||
| 152 | .wobble { | 152 | .wobble { | |||
| 153 | animation-name: wobble | 153 | animation-name: wobble | |||
| 154 | } | 154 | } | |||
| 155 | 155 | |||||
| 156 | @keyframes wiggle { | 156 | @keyframes wiggle { | |||
| 157 | 0% { | 157 | 0% { | |||
| 158 | transform: skewX(9deg) | 158 | transform: skewX(9deg) | |||
| 159 | } | 159 | } | |||
| 160 | 160 | |||||
| 161 | 10% { | 161 | 10% { | |||
| 162 | transform: skewX(-8deg) | 162 | transform: skewX(-8deg) | |||
| 163 | } | 163 | } | |||
| 164 | 164 | |||||
| 165 | 20% { | 165 | 20% { | |||
| 166 | transform: skewX(7deg) | 166 | transform: skewX(7deg) | |||
| 167 | } | 167 | } | |||
| 168 | 168 | |||||
| 169 | 30% { | 169 | 30% { | |||
| 170 | transform: skewX(-6deg) | 170 | transform: skewX(-6deg) | |||
| 171 | } | 171 | } | |||
| 172 | 172 | |||||
| 173 | 40% { | 173 | 40% { | |||
| 174 | transform: skewX(5deg) | 174 | transform: skewX(5deg) | |||
| 175 | } | 175 | } | |||
| 176 | 176 | |||||
| 177 | 50% { | 177 | 50% { | |||
| 178 | transform: skewX(-4deg) | 178 | transform: skewX(-4deg) | |||
| 179 | } | 179 | } | |||
| 180 | 180 | |||||
| 181 | 60% { | 181 | 60% { | |||
| 182 | transform: skewX(3deg) | 182 | transform: skewX(3deg) | |||
| 183 | } | 183 | } | |||
| 184 | 184 | |||||
| 185 | 70% { | 185 | 70% { | |||
| 186 | transform: skewX(-2deg) | 186 | transform: skewX(-2deg) | |||
| 187 | } | 187 | } | |||
| 188 | 188 | |||||
| 189 | 80% { | 189 | 80% { | |||
| 190 | transform: skewX(1deg) | 190 | transform: skewX(1deg) | |||
| 191 | } | 191 | } | |||
| 192 | 192 | |||||
| 193 | 90% { | 193 | 90% { | |||
| 194 | transform: skewX(0deg) | 194 | transform: skewX(0deg) | |||
| 195 | } | 195 | } | |||
| 196 | 196 | |||||
| 197 | 100% { | 197 | 100% { | |||
| 198 | transform: skewX(0deg); | 198 | transform: skewX(0deg); | |||
| 199 | opacity: 1 | 199 | opacity: 1 | |||
| 200 | } | 200 | } | |||
| 201 | } | 201 | } | |||
| 202 | 202 | |||||
| 203 | .wiggle { | 203 | .wiggle { | |||
| 204 | animation-name: wiggle; | 204 | animation-name: wiggle; | |||
| 205 | animation-timing-function: ease-in | 205 | animation-timing-function: ease-in | |||
| 206 | } | 206 | } | |||
| 207 | 207 | |||||
| 208 | @keyframes pulse { | 208 | @keyframes pulse { | |||
| 209 | 0% { | 209 | 0% { | |||
| 210 | transform: scale(1) | 210 | transform: scale(1) | |||
| 211 | } | 211 | } | |||
| 212 | 212 | |||||
| 213 | 50% { | 213 | 50% { | |||
| 214 | transform: scale(1.1) | 214 | transform: scale(1.1) | |||
| 215 | } | 215 | } | |||
| 216 | 216 | |||||
| 217 | 100% { | 217 | 100% { | |||
| 218 | transform: scale(1); | 218 | transform: scale(1); | |||
| 219 | opacity: 1 | 219 | opacity: 1 | |||
| 220 | } | 220 | } | |||
| 221 | } | 221 | } | |||
| 222 | 222 | |||||
| 223 | .pulse { | 223 | .pulse { | |||
| 224 | animation-name: pulse | 224 | animation-name: pulse | |||
| 225 | } | 225 | } | |||
| 226 | 226 | |||||
| 227 | @keyframes fadeIn { | 227 | @keyframes fadeIn { | |||
| 228 | 0% { | 228 | 0% { | |||
| 229 | opacity: 0 | 229 | opacity: 0 | |||
| 230 | } | 230 | } | |||
| 231 | 231 | |||||
| 232 | 100% { | 232 | 100% { | |||
| 233 | opacity: 1 | 233 | opacity: 1 | |||
| 234 | } | 234 | } | |||
| 235 | } | 235 | } | |||
| 236 | 236 | |||||
| 237 | .fadeIn { | 237 | .fadeIn { | |||
| 238 | animation-name: fadeIn | 238 | animation-name: fadeIn | |||
| 239 | } | 239 | } | |||
| 240 | 240 | |||||
| 241 | @keyframes fadeInUp { | 241 | @keyframes fadeInUp { | |||
| 242 | 0% { | 242 | 0% { | |||
| 243 | opacity: 0; | 243 | opacity: 0; | |||
| 244 | transform: translateY(30px) | 244 | transform: translateY(30px) | |||
| 245 | } | 245 | } | |||
| 246 | 246 | |||||
| 247 | 100% { | 247 | 100% { | |||
| 248 | opacity: 1; | 248 | opacity: 1; | |||
| 249 | transform: translateY(0) | 249 | transform: translateY(0) | |||
| 250 | } | 250 | } | |||
| 251 | } | 251 | } | |||
| 252 | 252 | |||||
| 253 | .fadeInUp { | 253 | .fadeInUp { | |||
| 254 | animation-name: fadeInUp | 254 | animation-name: fadeInUp | |||
| 255 | } | 255 | } | |||
| 256 | 256 | |||||
| 257 | @keyframes fadeInDown { | 257 | @keyframes fadeInDown { | |||
| 258 | 0% { | 258 | 0% { | |||
| 259 | opacity: 0; | 259 | opacity: 0; | |||
| 260 | transform: translateY(-30px) | 260 | transform: translateY(-30px) | |||
| 261 | } | 261 | } | |||
| 262 | 262 | |||||
| 263 | 100% { | 263 | 100% { | |||
| 264 | opacity: 1; | 264 | opacity: 1; | |||
| 265 | transform: translateY(0) | 265 | transform: translateY(0) | |||
| 266 | } | 266 | } | |||
| 267 | } | 267 | } | |||
| 268 | 268 | |||||
| 269 | .fadeInDown { | 269 | .fadeInDown { | |||
| 270 | animation-name: fadeInDown | 270 | animation-name: fadeInDown | |||
| 271 | } | 271 | } | |||
| 272 | 272 | |||||
| 273 | @keyframes fadeInLeft { | 273 | @keyframes fadeInLeft { | |||
| 274 | 0% { | 274 | 0% { | |||
| 275 | opacity: 0; | 275 | opacity: 0; | |||
| 276 | transform: translateX(-40px) | 276 | transform: translateX(-40px) | |||
| 277 | } | 277 | } | |||
| 278 | 278 | |||||
| 279 | 100% { | 279 | 100% { | |||
| 280 | opacity: 1; | 280 | opacity: 1; | |||
| 281 | transform: translateX(0) | 281 | transform: translateX(0) | |||
| 282 | } | 282 | } | |||
| 283 | } | 283 | } | |||
| 284 | 284 | |||||
| 285 | .fadeInLeft { | 285 | .fadeInLeft { | |||
| 286 | animation-name: fadeInLeft | 286 | animation-name: fadeInLeft | |||
| 287 | } | 287 | } | |||
| 288 | 288 | |||||
| 289 | @keyframes fadeInRight { | 289 | @keyframes fadeInRight { | |||
| 290 | 0% { | 290 | 0% { | |||
| 291 | opacity: 0; | 291 | opacity: 0; | |||
| 292 | transform: translateX(40px) | 292 | transform: translateX(40px) | |||
| 293 | } | 293 | } | |||
| 294 | 294 | |||||
| 295 | 100% { | 295 | 100% { | |||
| 296 | opacity: 1; | 296 | opacity: 1; | |||
| 297 | transform: translateX(0) | 297 | transform: translateX(0) | |||
| 298 | } | 298 | } | |||
| 299 | } | 299 | } | |||
| 300 | 300 | |||||
| 301 | .fadeInRight { | 301 | .fadeInRight { | |||
| 302 | animation-name: fadeInRight | 302 | animation-name: fadeInRight | |||
| 303 | } | 303 | } | |||
| 304 | 304 | |||||
| 305 | @keyframes fadeInUpBig { | 305 | @keyframes fadeInUpBig { | |||
| 306 | 0% { | 306 | 0% { | |||
| 307 | opacity: 0; | 307 | opacity: 0; | |||
| 308 | transform: translateY(2000px) | 308 | transform: translateY(2000px) | |||
| 309 | } | 309 | } | |||
| 310 | 310 | |||||
| 311 | 100% { | 311 | 100% { | |||
| 312 | opacity: 1; | 312 | opacity: 1; | |||
| 313 | transform: translateY(0) | 313 | transform: translateY(0) | |||
| 314 | } | 314 | } | |||
| 315 | } | 315 | } | |||
| 316 | 316 | |||||
| 317 | .fadeInUpBig { | 317 | .fadeInUpBig { | |||
| 318 | animation-name: fadeInUpBig | 318 | animation-name: fadeInUpBig | |||
| 319 | } | 319 | } | |||
| 320 | 320 | |||||
| 321 | @keyframes fadeInDownBig { | 321 | @keyframes fadeInDownBig { | |||
| 322 | 0% { | 322 | 0% { | |||
| 323 | opacity: 0; | 323 | opacity: 0; | |||
| 324 | transform: translateY(-2000px) | 324 | transform: translateY(-2000px) | |||
| 325 | } | 325 | } | |||
| 326 | 326 | |||||
| 327 | 100% { | 327 | 100% { | |||
| 328 | opacity: 1; | 328 | opacity: 1; | |||
| 329 | transform: translateY(0) | 329 | transform: translateY(0) | |||
| 330 | } | 330 | } | |||
| 331 | } | 331 | } | |||
| 332 | 332 | |||||
| 333 | .fadeInDownBig { | 333 | .fadeInDownBig { | |||
| 334 | animation-name: fadeInDownBig | 334 | animation-name: fadeInDownBig | |||
| 335 | } | 335 | } | |||
| 336 | 336 | |||||
| 337 | @keyframes fadeInLeftBig { | 337 | @keyframes fadeInLeftBig { | |||
| 338 | 0% { | 338 | 0% { | |||
| 339 | opacity: 0; | 339 | opacity: 0; | |||
| 340 | transform: translateX(-2000px) | 340 | transform: translateX(-2000px) | |||
| 341 | } | 341 | } | |||
| 342 | 342 | |||||
| 343 | 100% { | 343 | 100% { | |||
| 344 | opacity: 1; | 344 | opacity: 1; | |||
| 345 | transform: translateX(0) | 345 | transform: translateX(0) | |||
| 346 | } | 346 | } | |||
| 347 | } | 347 | } | |||
| 348 | 348 | |||||
| 349 | .fadeInLeftBig { | 349 | .fadeInLeftBig { | |||
| 350 | animation-name: fadeInLeftBig | 350 | animation-name: fadeInLeftBig | |||
| 351 | } | 351 | } | |||
| 352 | 352 | |||||
| 353 | @keyframes fadeInRightBig { | 353 | @keyframes fadeInRightBig { | |||
| 354 | 0% { | 354 | 0% { | |||
| 355 | opacity: 0; | 355 | opacity: 0; | |||
| 356 | transform: translateX(2000px) | 356 | transform: translateX(2000px) | |||
| 357 | } | 357 | } | |||
| 358 | 358 | |||||
| 359 | 100% { | 359 | 100% { | |||
| 360 | opacity: 1; | 360 | opacity: 1; | |||
| 361 | transform: translateX(0) | 361 | transform: translateX(0) | |||
| 362 | } | 362 | } | |||
| 363 | } | 363 | } | |||
| 364 | 364 | |||||
| 365 | .fadeInRightBig { | 365 | .fadeInRightBig { | |||
| 366 | animation-name: fadeInRightBig | 366 | animation-name: fadeInRightBig | |||
| 367 | } | 367 | } | |||
| 368 | 368 | |||||
| 369 | @keyframes bounceIn { | 369 | @keyframes bounceIn { | |||
| 370 | 0% { | 370 | 0% { | |||
| 371 | opacity: 0; | 371 | opacity: 0; | |||
| 372 | transform: scale(.3) | 372 | transform: scale(.3) | |||
| 373 | } | 373 | } | |||
| 374 | 374 | |||||
| 375 | 50% { | 375 | 50% { | |||
| 376 | opacity: 1; | 376 | opacity: 1; | |||
| 377 | transform: scale(1.05) | 377 | transform: scale(1.05) | |||
| 378 | } | 378 | } | |||
| 379 | 379 | |||||
| 380 | 70% { | 380 | 70% { | |||
| 381 | transform: scale(.9) | 381 | transform: scale(.9) | |||
| 382 | } | 382 | } | |||
| 383 | 383 | |||||
| 384 | 100% { | 384 | 100% { | |||
| 385 | transform: scale(1); | 385 | transform: scale(1); | |||
| 386 | opacity: 1 | 386 | opacity: 1 | |||
| 387 | } | 387 | } | |||
| 388 | } | 388 | } | |||
| 389 | 389 | |||||
| 390 | .bounceIn { | 390 | .bounceIn { | |||
| 391 | animation-name: bounceIn | 391 | animation-name: bounceIn | |||
| 392 | } | 392 | } | |||
| 393 | 393 | |||||
| 394 | @keyframes bounceInUp { | 394 | @keyframes bounceInUp { | |||
| 395 | 0% { | 395 | 0% { | |||
| 396 | opacity: 0; | 396 | opacity: 0; | |||
| 397 | transform: translateY(2000px) | 397 | transform: translateY(2000px) | |||
| 398 | } | 398 | } | |||
| 399 | 399 | |||||
| 400 | 60% { | 400 | 60% { | |||
| 401 | opacity: 1; | 401 | opacity: 1; | |||
| 402 | transform: translateY(-30px) | 402 | transform: translateY(-30px) | |||
| 403 | } | 403 | } | |||
| 404 | 404 | |||||
| 405 | 80% { | 405 | 80% { | |||
| 406 | transform: translateY(10px) | 406 | transform: translateY(10px) | |||
| 407 | } | 407 | } | |||
| 408 | 408 | |||||
| 409 | 100% { | 409 | 100% { | |||
| 410 | transform: translateY(0); | 410 | transform: translateY(0); | |||
| 411 | opacity: 1 | 411 | opacity: 1 | |||
| 412 | } | 412 | } | |||
| 413 | } | 413 | } | |||
| 414 | 414 | |||||
| 415 | .bounceInUp { | 415 | .bounceInUp { | |||
| 416 | animation-name: bounceInUp | 416 | animation-name: bounceInUp | |||
| 417 | } | 417 | } | |||
| 418 | 418 | |||||
| 419 | @keyframes bounceInDown { | 419 | @keyframes bounceInDown { | |||
| 420 | 0% { | 420 | 0% { | |||
| 421 | opacity: 0; | 421 | opacity: 0; | |||
| 422 | transform: translateY(-2000px) | 422 | transform: translateY(-2000px) | |||
| 423 | } | 423 | } | |||
| 424 | 424 | |||||
| 425 | 60% { | 425 | 60% { | |||
| 426 | opacity: 1; | 426 | opacity: 1; | |||
| 427 | transform: translateY(30px) | 427 | transform: translateY(30px) | |||
| 428 | } | 428 | } | |||
| 429 | 429 | |||||
| 430 | 80% { | 430 | 80% { | |||
| 431 | transform: translateY(-10px) | 431 | transform: translateY(-10px) | |||
| 432 | } | 432 | } | |||
| 433 | 433 | |||||
| 434 | 100% { | 434 | 100% { | |||
| 435 | transform: translateY(0); | 435 | transform: translateY(0); | |||
| 436 | opacity: 1 | 436 | opacity: 1 | |||
| 437 | } | 437 | } | |||
| 438 | } | 438 | } | |||
| 439 | 439 | |||||
| 440 | .bounceInDown { | 440 | .bounceInDown { | |||
| 441 | animation-name: bounceInDown | 441 | animation-name: bounceInDown | |||
| 442 | } | 442 | } | |||
| 443 | 443 | |||||
| 444 | @keyframes bounceInLeft { | 444 | @keyframes bounceInLeft { | |||
| 445 | 0% { | 445 | 0% { | |||
| 446 | opacity: 0; | 446 | opacity: 0; | |||
| 447 | transform: translateX(-2000px) | 447 | transform: translateX(-2000px) | |||
| 448 | } | 448 | } | |||
| 449 | 449 | |||||
| 450 | 60% { | 450 | 60% { | |||
| 451 | opacity: 1; | 451 | opacity: 1; | |||
| 452 | transform: translateX(30px) | 452 | transform: translateX(30px) | |||
| 453 | } | 453 | } | |||
| 454 | 454 | |||||
| 455 | 80% { | 455 | 80% { | |||
| 456 | transform: translateX(-10px) | 456 | transform: translateX(-10px) | |||
| 457 | } | 457 | } | |||
| 458 | 458 | |||||
| 459 | 100% { | 459 | 100% { | |||
| 460 | transform: translateX(0); | 460 | transform: translateX(0); | |||
| 461 | opacity: 1 | 461 | opacity: 1 | |||
| 462 | } | 462 | } | |||
| 463 | } | 463 | } | |||
| 464 | 464 | |||||
| 465 | .bounceInLeft { | 465 | .bounceInLeft { | |||
| 466 | animation-name: bounceInLeft | 466 | animation-name: bounceInLeft | |||
| 467 | } | 467 | } | |||
| 468 | 468 | |||||
| 469 | @keyframes bounceInRight { | 469 | @keyframes bounceInRight { | |||
| 470 | 0% { | 470 | 0% { | |||
| 471 | opacity: 0; | 471 | opacity: 0; | |||
| 472 | transform: translateX(2000px) | 472 | transform: translateX(2000px) | |||
| 473 | } | 473 | } | |||
| 474 | 474 | |||||
| 475 | 60% { | 475 | 60% { | |||
| 476 | opacity: 1; | 476 | opacity: 1; | |||
| 477 | transform: translateX(-30px) | 477 | transform: translateX(-30px) | |||
| 478 | } | 478 | } | |||
| 479 | 479 | |||||
| 480 | 80% { | 480 | 80% { | |||
| 481 | transform: translateX(10px) | 481 | transform: translateX(10px) | |||
| 482 | } | 482 | } | |||
| 483 | 483 | |||||
| 484 | 100% { | 484 | 100% { | |||
| 485 | transform: translateX(0); | 485 | transform: translateX(0); | |||
| 486 | opacity: 1 | 486 | opacity: 1 | |||
| 487 | } | 487 | } | |||
| 488 | } | 488 | } | |||
| 489 | 489 | |||||
| 490 | .bounceInRight { | 490 | .bounceInRight { | |||
| 491 | animation-name: bounceInRight | 491 | animation-name: bounceInRight | |||
| 492 | } | 492 | } | |||
| 493 | 493 | |||||
| 494 | @keyframes rotateIn { | 494 | @keyframes rotateIn { | |||
| 495 | 0% { | 495 | 0% { | |||
| 496 | transform-origin: center center; | 496 | transform-origin: center center; | |||
| 497 | transform: rotate(-200deg); | 497 | transform: rotate(-200deg); | |||
| 498 | opacity: 0 | 498 | opacity: 0 | |||
| 499 | } | 499 | } | |||
| 500 | 500 | |||||
| 501 | 100% { | 501 | 100% { | |||
| 502 | transform-origin: center center; | 502 | transform-origin: center center; | |||
| 503 | transform: rotate(0); | 503 | transform: rotate(0); | |||
| 504 | opacity: 1 | 504 | opacity: 1 | |||
| 505 | } | 505 | } | |||
| 506 | } | 506 | } | |||
| 507 | 507 | |||||
| 508 | .rotateIn { | 508 | .rotateIn { | |||
| 509 | animation-name: rotateIn | 509 | animation-name: rotateIn | |||
| 510 | } | 510 | } | |||
| 511 | 511 | |||||
| 512 | @keyframes rotateInUpLeft { | 512 | @keyframes rotateInUpLeft { | |||
| 513 | 0% { | 513 | 0% { | |||
| 514 | transform-origin: left bottom; | 514 | transform-origin: left bottom; | |||
| 515 | transform: rotate(90deg); | 515 | transform: rotate(90deg); | |||
| 516 | opacity: 0 | 516 | opacity: 0 | |||
| 517 | } | 517 | } | |||
| 518 | 518 | |||||
| 519 | 100% { | 519 | 100% { | |||
| 520 | transform-origin: left bottom; | 520 | transform-origin: left bottom; | |||
| 521 | transform: rotate(0); | 521 | transform: rotate(0); | |||
| 522 | opacity: 1 | 522 | opacity: 1 | |||
| 523 | } | 523 | } | |||
| 524 | } | 524 | } | |||
| 525 | 525 | |||||
| 526 | .rotateInUpLeft { | 526 | .rotateInUpLeft { | |||
| 527 | animation-name: rotateInUpLeft | 527 | animation-name: rotateInUpLeft | |||
| 528 | } | 528 | } | |||
| 529 | 529 | |||||
| 530 | @keyframes rotateInDownLeft { | 530 | @keyframes rotateInDownLeft { | |||
| 531 | 0% { | 531 | 0% { | |||
| 532 | transform-origin: left bottom; | 532 | transform-origin: left bottom; | |||
| 533 | transform: rotate(-90deg); | 533 | transform: rotate(-90deg); | |||
| 534 | opacity: 0 | 534 | opacity: 0 | |||
| 535 | } | 535 | } | |||
| 536 | 536 | |||||
| 537 | 100% { | 537 | 100% { | |||
| 538 | transform-origin: left bottom; | 538 | transform-origin: left bottom; | |||
| 539 | transform: rotate(0); | 539 | transform: rotate(0); | |||
| 540 | opacity: 1 | 540 | opacity: 1 | |||
| 541 | } | 541 | } | |||
| 542 | } | 542 | } | |||
| 543 | 543 | |||||
| 544 | .rotateInDownLeft { | 544 | .rotateInDownLeft { | |||
| 545 | animation-name: rotateInDownLeft | 545 | animation-name: rotateInDownLeft | |||
| 546 | } | 546 | } | |||
| 547 | 547 | |||||
| 548 | @keyframes rotateInUpRight { | 548 | @keyframes rotateInUpRight { | |||
| 549 | 0% { | 549 | 0% { | |||
| 550 | transform-origin: right bottom; | 550 | transform-origin: right bottom; | |||
| 551 | transform: rotate(-90deg); | 551 | transform: rotate(-90deg); | |||
| 552 | opacity: 0 | 552 | opacity: 0 | |||
| 553 | } | 553 | } | |||
| 554 | 554 | |||||
| 555 | 100% { | 555 | 100% { | |||
| 556 | transform-origin: right bottom; | 556 | transform-origin: right bottom; | |||
| 557 | transform: rotate(0); | 557 | transform: rotate(0); | |||
| 558 | opacity: 1 | 558 | opacity: 1 | |||
| 559 | } | 559 | } | |||
| 560 | } | 560 | } | |||
| 561 | 561 | |||||
| 562 | .rotateInUpRight { | 562 | .rotateInUpRight { | |||
| 563 | animation-name: rotateInUpRight | 563 | animation-name: rotateInUpRight | |||
| 564 | } | 564 | } | |||
| 565 | 565 | |||||
| 566 | @keyframes rotateInDownRight { | 566 | @keyframes rotateInDownRight { | |||
| 567 | 0% { | 567 | 0% { | |||
| 568 | transform-origin: right bottom; | 568 | transform-origin: right bottom; | |||
| 569 | transform: rotate(90deg); | 569 | transform: rotate(90deg); | |||
| 570 | opacity: 0 | 570 | opacity: 0 | |||
| 571 | } | 571 | } | |||
| 572 | 572 | |||||
| 573 | 100% { | 573 | 100% { | |||
| 574 | transform-origin: right bottom; | 574 | transform-origin: right bottom; | |||
| 575 | transform: rotate(0); | 575 | transform: rotate(0); | |||
| 576 | opacity: 1 | 576 | opacity: 1 | |||
| 577 | } | 577 | } | |||
| 578 | } | 578 | } | |||
| 579 | 579 | |||||
| 580 | .rotateInDownRight { | 580 | .rotateInDownRight { | |||
| 581 | animation-name: rotateInDownRight | 581 | animation-name: rotateInDownRight | |||
| 582 | } | 582 | } | |||
| 583 | 583 | |||||
| 584 | @keyframes zoomIn { | 584 | @keyframes zoomIn { | |||
| 585 | 0% { | 585 | 0% { | |||
| 586 | opacity: 0; | 586 | opacity: 0; | |||
| 587 | transform: scale(.3) | 587 | transform: scale(.3) | |||
| 588 | } | 588 | } | |||
| 589 | 589 | |||||
| 590 | 50% { | 590 | 50% { | |||
| 591 | opacity: 1 | 591 | opacity: 1 | |||
| 592 | } | 592 | } | |||
| 593 | 593 | |||||
| 594 | 100% { | 594 | 100% { | |||
| 595 | opacity: 1; | 595 | opacity: 1; | |||
| 596 | transform: scale(1) | 596 | transform: scale(1) | |||
| 597 | } | 597 | } | |||
| 598 | } | 598 | } | |||
| 599 | 599 | |||||
| 600 | .zoomIn { | 600 | .zoomIn { | |||
| 601 | animation-name: zoomIn | 601 | animation-name: zoomIn | |||
| 602 | } | 602 | } | |||
| 603 | 603 | |||||
| 604 | @keyframes slideInRight { | 604 | @keyframes slideInRight { | |||
| 605 | 0% { | 605 | 0% { | |||
| 606 | opacity: 1; | 606 | opacity: 1; | |||
| 607 | transform: translateX(2000px) | 607 | transform: translateX(2000px) | |||
| 608 | } | 608 | } | |||
| 609 | 609 | |||||
| 610 | 100% { | 610 | 100% { | |||
| 611 | opacity: 1; | 611 | opacity: 1; | |||
| 612 | transform: translateX(0) | 612 | transform: translateX(0) | |||
| 613 | } | 613 | } | |||
| 614 | } | 614 | } | |||
| 615 | 615 | |||||
| 616 | .slideInRight { | 616 | .slideInRight { | |||
| 617 | animation-name: slideInRight | 617 | animation-name: slideInRight | |||
| 618 | } | 618 | } | |||
| 619 | 619 | |||||
| 620 | @keyframes slideInUp { | 620 | @keyframes slideInUp { | |||
| 621 | 0% { | 621 | 0% { | |||
| 622 | -webkit-transform: translate3d(0,100%,0); | 622 | -webkit-transform: translate3d(0,100%,0); | |||
| 623 | transform: translate3d(0,100%,0); | 623 | transform: translate3d(0,100%,0); | |||
| 624 | visibility: visible | 624 | visibility: visible | |||
| 625 | } | 625 | } | |||
| 626 | 626 | |||||
| 627 | to { | 627 | to { | |||
| 628 | transform: translateZ(0) | 628 | transform: translateZ(0) | |||
| 629 | } | 629 | } | |||
| 630 | } | 630 | } | |||
| 631 | 631 | |||||
| 632 | .slideInUp { | 632 | .slideInUp { | |||
| 633 | animation-name: slideInUp | 633 | animation-name: slideInUp | |||
| 634 | } | 634 | } | |||
| 635 | 635 | |||||
| 636 | @keyframes slideOutLeft { | 636 | @keyframes slideOutLeft { | |||
| 637 | 0% { | 637 | 0% { | |||
| 638 | opacity: 1; | 638 | opacity: 1; | |||
| 639 | transform: translateX(0) | 639 | transform: translateX(0) | |||
| 640 | } | 640 | } | |||
| 641 | 641 | |||||
| 642 | 100% { | 642 | 100% { | |||
| 643 | opacity: 1; | 643 | opacity: 1; | |||
| 644 | transform: translateX(-2000px) | 644 | transform: translateX(-2000px) | |||
| 645 | } | 645 | } | |||
| 646 | } | 646 | } | |||
| 647 | 647 | |||||
| 648 | .slideOutLeft { | 648 | .slideOutLeft { | |||
| 649 | animation-name: slideOutLeft | 649 | animation-name: slideOutLeft | |||
| 650 | } | 650 | } | |||
| 651 | 651 | |||||
| 652 | @keyframes spin { | 652 | @keyframes spin { | |||
| 653 | 0% { | 653 | 0% { | |||
| 654 | transform: rotate(0deg) | 654 | transform: rotate(0deg) | |||
| 655 | } | 655 | } | |||
| 656 | 656 | |||||
| 657 | 100% { | 657 | 100% { | |||
| 658 | transform: rotate(359deg) | 658 | transform: rotate(359deg) | |||
| 659 | } | 659 | } | |||
| 660 | } | 660 | } | |||
| 661 | 661 | |||||
| 662 | @keyframes wave { | 662 | @keyframes wave { | |||
| 663 | 0% { | 663 | 0% { | |||
| 664 | transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg) | 664 | transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg) | |||
| 665 | } | 665 | } | |||
| 666 | 666 | |||||
| 667 | 100% { | 667 | 100% { | |||
| 668 | transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg) | 668 | transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg) | |||
| 669 | } | 669 | } | |||
| 670 | } | 670 | } | |||
| 671 | 671 | |||||
| 672 | @keyframes navItemArrow { | 672 | @keyframes navItemArrow { | |||
| 673 | 0% { | 673 | 0% { | |||
| 674 | position: relative; | 674 | position: relative; | |||
| 675 | right: -1px | 675 | right: -1px | |||
| 676 | } | 676 | } | |||
| 677 | 677 | |||||
| 678 | 50% { | 678 | 50% { | |||
| 679 | position: relative; | 679 | position: relative; | |||
| 680 | right: 3px | 680 | right: 3px | |||
| 681 | } | 681 | } | |||
| 682 | 682 | |||||
| 683 | 100% { | 683 | 100% { | |||
| 684 | position: relative; | 684 | position: relative; | |||
| 685 | right: -1px | 685 | right: -1px | |||
| 686 | } | 686 | } | |||
| 687 | } | 687 | } | |||
| 688 | 688 | |||||
| 689 | @keyframes arrowLeftRight { | 689 | @keyframes arrowLeftRight { | |||
| 690 | 0% { | 690 | 0% { | |||
| 691 | transform: translateX(0) | 691 | transform: translateX(0) | |||
| 692 | } | 692 | } | |||
| 693 | 693 | |||||
| 694 | 50% { | 694 | 50% { | |||
| 695 | transform: translateX(3px) | 695 | transform: translateX(3px) | |||
| 696 | } | 696 | } | |||
| 697 | 697 | |||||
| 698 | 100% { | 698 | 100% { | |||
| 699 | transform: translateX(0) | 699 | transform: translateX(0) | |||
| 700 | } | 700 | } | |||
| 701 | } | 701 | } | |||
| 702 | 702 | |||||
| 703 | @keyframes slide-in { | 703 | @keyframes slide-in { | |||
| 704 | 0% { | 704 | 0% { | |||
| 705 | opacity: 0; | 705 | opacity: 0; | |||
| 706 | transform: translateY(-100%) | 706 | transform: translateY(-100%) | |||
| 707 | } | 707 | } | |||
| 708 | 708 | |||||
| 709 | 60% { | 709 | 60% { | |||
| 710 | opacity: 1; | 710 | opacity: 1; | |||
| 711 | transform: translateY(20%) | 711 | transform: translateY(20%) | |||
| 712 | } | 712 | } | |||
| 713 | 713 | |||||
| 714 | 100% { | 714 | 100% { | |||
| 715 | opacity: 1; | 715 | opacity: 1; | |||
| 716 | transform: translateY(0) | 716 | transform: translateY(0) | |||
| 717 | } | 717 | } | |||
| 718 | } | 718 | } | |||
| 719 | 719 | |||||
| 720 | @keyframes slide-out { | 720 | @keyframes slide-out { | |||
| 721 | 0% { | 721 | 0% { | |||
| 722 | opacity: 1; | 722 | opacity: 1; | |||
| 723 | transform: translateY(0) | 723 | transform: translateY(0) | |||
| 724 | } | 724 | } | |||
| 725 | 725 | |||||
| 726 | 60% { | 726 | 60% { | |||
| 727 | opacity: 0; | 727 | opacity: 0; | |||
| 728 | transform: translateY(120%) | 728 | transform: translateY(120%) | |||
| 729 | } | 729 | } | |||
| 730 | 730 | |||||
| 731 | 100% { | 731 | 100% { | |||
| 732 | opacity: 0; | 732 | opacity: 0; | |||
| 733 | transform: translateY(100%) | 733 | transform: translateY(100%) | |||
| 734 | } | 734 | } | |||
| 735 | } | 735 | } | |||
| 736 | 736 | |||||
| 737 | @keyframes maskUp { | 737 | @keyframes maskUp { | |||
| 738 | from { | 738 | from { | |||
| 739 | transform: translate(0,100%) | 739 | transform: translate(0,100%) | |||
| 740 | } | 740 | } | |||
| 741 | 741 | |||||
| 742 | to { | 742 | to { | |||
| 743 | transform: translate(0,0) | 743 | transform: translate(0,0) | |||
| 744 | } | 744 | } | |||
| 745 | } | 745 | } | |||
| 746 | 746 | |||||
| 747 | .maskUp { | 747 | .maskUp { | |||
| 748 | animation-name: maskUp | 748 | animation-name: maskUp | |||
| 749 | } | 749 | } | |||
| 750 | 750 | |||||
| 751 | @keyframes sliderScrollButton { | 751 | @keyframes sliderScrollButton { | |||
| 752 | 0% { | 752 | 0% { | |||
| 753 | opacity: 1; | 753 | opacity: 1; | |||
| 754 | -webkit-transform: translate3d(-50%,0,0); | 754 | -webkit-transform: translate3d(-50%,0,0); | |||
| 755 | transform: translate3d(-50%,0,0) | 755 | transform: translate3d(-50%,0,0) | |||
| 756 | } | 756 | } | |||
| 757 | 757 | |||||
| 758 | 70% { | 758 | 70% { | |||
| 759 | opacity: 1; | 759 | opacity: 1; | |||
| 760 | -webkit-transform: translate3d(-50%,10px,0); | 760 | -webkit-transform: translate3d(-50%,10px,0); | |||
| 761 | transform: translate3d(-50%,10px,0) | 761 | transform: translate3d(-50%,10px,0) | |||
| 762 | } | 762 | } | |||
| 763 | 763 | |||||
| 764 | 100% { | 764 | 100% { | |||
| 765 | opacity: 0; | 765 | opacity: 0; | |||
| 766 | -webkit-transform: translate3d(-50%,10px,0); | 766 | -webkit-transform: translate3d(-50%,10px,0); | |||
| 767 | transform: translate3d(-50%,10px,0) | 767 | transform: translate3d(-50%,10px,0) | |||
| 768 | } | 768 | } | |||
| 769 | } | 769 | } | |||
| 770 | 770 | |||||
| 771 | @keyframes gradientTransition { | 771 | @keyframes gradientTransition { | |||
| 772 | 0% { | 772 | 0% { | |||
| 773 | background-position: 0% 50% | 773 | background-position: 0% 50% | |||
| 774 | } | 774 | } | |||
| 775 | 775 | |||||
| 776 | 50% { | 776 | 50% { | |||
| 777 | background-position: 100% 50% | 777 | background-position: 100% 50% | |||
| 778 | } | 778 | } | |||
| 779 | 779 | |||||
| 780 | 100% { | 780 | 100% { | |||
| 781 | background-position: 0% 50% | 781 | background-position: 0% 50% | |||
| 782 | } | 782 | } | |||
| 783 | } | 783 | } | |||
| 784 | 784 | |||||
| 785 | @keyframes slideInLeft { | 785 | @keyframes slideInLeft { | |||
| 786 | 0% { | 786 | 0% { | |||
| 787 | transform: translateX(-101%); | 787 | transform: translateX(-101%); | |||
| 788 | visibility: visible | 788 | visibility: visible | |||
| 789 | } | 789 | } | |||
| 790 | 790 | |||||
| 791 | 100% { | 791 | 100% { | |||
| 792 | transform: translateX(0) | 792 | transform: translateX(0) | |||
| 793 | } | 793 | } | |||
| 794 | } | 794 | } | |||
| 795 | 795 | |||||
| 796 | .slideInLeft { | 796 | .slideInLeft { | |||
| 797 | animation-name: slideInLeft | 797 | animation-name: slideInLeft | |||
| 798 | } | 798 | } | |||
| 799 | 799 | |||||
| 800 | @keyframes topDown { | 800 | @keyframes topDown { | |||
| 801 | 0% { | 801 | 0% { | |||
| 802 | transform: translateY(0) | 802 | transform: translateY(0) | |||
| 803 | } | 803 | } | |||
| 804 | 804 | |||||
| 805 | 50% { | 805 | 50% { | |||
| 806 | transform: translateY(-5px) | 806 | transform: translateY(-5px) | |||
| 807 | } | 807 | } | |||
| 808 | 808 | |||||
| 809 | 100% { | 809 | 100% { | |||
| 810 | transform: translateY(0) | 810 | transform: translateY(0) | |||
| 811 | } | 811 | } | |||
| 812 | } | 812 | } | |||
| 813 | @-webkit-keyframes flip { | 813 | @-webkit-keyframes flip { | |||
| 814 | 0% { | 814 | 0% { | |||
| 815 | -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); | 815 | -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); | |||
| 816 | transform: perspective(400px) translateZ(0) rotateY(0) scale(1); | 816 | transform: perspective(400px) translateZ(0) rotateY(0) scale(1); | |||
| 817 | -webkit-animation-timing-function: ease-out; | 817 | -webkit-animation-timing-function: ease-out; | |||
| 818 | animation-timing-function: ease-out; | 818 | animation-timing-function: ease-out; | |||
| 819 | } | 819 | } | |||
| 820 | 820 | |||||
| 821 | 40% { | 821 | 40% { | |||
| 822 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); | 822 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); | |||
| 823 | transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); | 823 | transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); | |||
| 824 | -webkit-animation-timing-function: ease-out; | 824 | -webkit-animation-timing-function: ease-out; | |||
| 825 | animation-timing-function: ease-out; | 825 | animation-timing-function: ease-out; | |||
| 826 | } | 826 | } | |||
| 827 | 827 | |||||
| 828 | 50% { | 828 | 50% { | |||
| 829 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); | 829 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); | |||
| 830 | transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); | 830 | transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); | |||
| 831 | -webkit-animation-timing-function: ease-in; | 831 | -webkit-animation-timing-function: ease-in; | |||
| 832 | animation-timing-function: ease-in; | 832 | animation-timing-function: ease-in; | |||
| 833 | } | 833 | } | |||
| 834 | 834 | |||||
| 835 | 80% { | 835 | 80% { | |||
| 836 | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); | 836 | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); | |||
| 837 | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); | 837 | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); | |||
| 838 | -webkit-animation-timing-function: ease-in; | 838 | -webkit-animation-timing-function: ease-in; | |||
| 839 | animation-timing-function: ease-in; | 839 | animation-timing-function: ease-in; | |||
| 840 | } | 840 | } | |||
| 841 | 841 | |||||
| 842 | 100% { | 842 | 100% { | |||
| 843 | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); | 843 | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); | |||
| 844 | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); | 844 | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); | |||
| 845 | -webkit-animation-timing-function: ease-in; | 845 | -webkit-animation-timing-function: ease-in; | |||
| 846 | animation-timing-function: ease-in; | 846 | animation-timing-function: ease-in; | |||
| 847 | } | 847 | } | |||
| 848 | } | 848 | } | |||
| 849 | 849 | |||||
| 850 | @keyframes flip { | 850 | @keyframes flip { | |||
| 851 | 0% { | 851 | 0% { | |||
| 852 | -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); | 852 | -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); | |||
| 853 | -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); | 853 | -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); | |||
| 854 | transform: perspective(400px) translateZ(0) rotateY(0) scale(1); | 854 | transform: perspective(400px) translateZ(0) rotateY(0) scale(1); | |||
| 855 | -webkit-animation-timing-function: ease-out; | 855 | -webkit-animation-timing-function: ease-out; | |||
| 856 | animation-timing-function: ease-out; | 856 | animation-timing-function: ease-out; | |||
| 857 | } | 857 | } | |||
| 858 | 858 | |||||
| 859 | 40% { | 859 | 40% { | |||
| 860 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); | 860 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); | |||
| 861 | -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); | 861 | -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); | |||
| 862 | transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); | 862 | transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); | |||
| 863 | -webkit-animation-timing-function: ease-out; | 863 | -webkit-animation-timing-function: ease-out; | |||
| 864 | animation-timing-function: ease-out; | 864 | animation-timing-function: ease-out; | |||
| 865 | } | 865 | } | |||
| 866 | 866 | |||||
| 867 | 50% { | 867 | 50% { | |||
| 868 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); | 868 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); | |||
| 869 | -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); | 869 | -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); | |||
| 870 | transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); | 870 | transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); | |||
| 871 | -webkit-animation-timing-function: ease-in; | 871 | -webkit-animation-timing-function: ease-in; | |||
| 872 | animation-timing-function: ease-in; | 872 | animation-timing-function: ease-in; | |||
| 873 | } | 873 | } | |||
| 874 | 874 | |||||
| 875 | 80% { | 875 | 80% { | |||
| 876 | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); | 876 | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); | |||
| 877 | -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); | 877 | -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); | |||
| 878 | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); | 878 | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); | |||
| 879 | -webkit-animation-timing-function: ease-in; | 879 | -webkit-animation-timing-function: ease-in; | |||
| 880 | animation-timing-function: ease-in; | 880 | animation-timing-function: ease-in; | |||
| 881 | } | 881 | } | |||
| 882 | 882 | |||||
| 883 | 100% { | 883 | 100% { | |||
| 884 | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); | 884 | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); | |||
| 885 | -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); | 885 | -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); | |||
| 886 | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); | 886 | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); | |||
| 887 | -webkit-animation-timing-function: ease-in; | 887 | -webkit-animation-timing-function: ease-in; | |||
| 888 | animation-timing-function: ease-in; | 888 | animation-timing-function: ease-in; | |||
| 889 | } | 889 | } | |||
| 890 | } | 890 | } | |||
| 891 | 891 | |||||
| 892 | .animated.flip { | 892 | .animated.flip { | |||
| 893 | -webkit-backface-visibility: visible; | 893 | -webkit-backface-visibility: visible; | |||
| 894 | -ms-backface-visibility: visible; | 894 | -ms-backface-visibility: visible; | |||
| 895 | backface-visibility: visible; | 895 | backface-visibility: visible; | |||
| 896 | -webkit-animation-name: flip; | 896 | -webkit-animation-name: flip; | |||
| 897 | animation-name: flip; | 897 | animation-name: flip; | |||
| 898 | } | 898 | } | |||
| 899 | @keyframes flipInX { | 899 | @keyframes flipInX { | |||
| 900 | 0% { | 900 | 0% { | |||
| 901 | transform: perspective(400px) rotate3d(1,0,0,90deg); | 901 | transform: perspective(400px) rotate3d(1,0,0,90deg); | |||
| 902 | transition-timing-function: ease-in; | 902 | transition-timing-function: ease-in; | |||
| 903 | opacity: 0 | 903 | opacity: 0 | |||
| 904 | } | 904 | } | |||
| 905 | 905 | |||||
| 906 | 40% { | 906 | 40% { | |||
| 907 | transform: perspective(400px) rotate3d(1,0,0,-20deg); | 907 | transform: perspective(400px) rotate3d(1,0,0,-20deg); | |||
| 908 | transition-timing-function: ease-in | 908 | transition-timing-function: ease-in | |||
| 909 | } | 909 | } | |||
| 910 | 910 | |||||
| 911 | 60% { | 911 | 60% { | |||
| 912 | transform: perspective(400px) rotate3d(1,0,0,10deg); | 912 | transform: perspective(400px) rotate3d(1,0,0,10deg); | |||
| 913 | opacity: 1 | 913 | opacity: 1 | |||
| 914 | } | 914 | } | |||
| 915 | 915 | |||||
| 916 | 80% { | 916 | 80% { | |||
| 917 | transform: perspective(400px) rotate3d(1,0,0,-5deg) | 917 | transform: perspective(400px) rotate3d(1,0,0,-5deg) | |||
| 918 | } | 918 | } | |||
| 919 | 919 | |||||
| 920 | 100% { | 920 | 100% { | |||
| 921 | transform: perspective(400px) | 921 | transform: perspective(400px) | |||
| 922 | } | 922 | } | |||
| 923 | } | 923 | } | |||
| 924 | 924 | |||||
| 925 | .flipInX { | 925 | .flipInX { | |||
| 926 | -webkit-backface-visibility: visible!important; | 926 | -webkit-backface-visibility: visible!important; | |||
| 927 | backface-visibility: visible!important; | 927 | backface-visibility: visible!important; | |||
| 928 | animation-name: flipInX | 928 | animation-name: flipInX | |||
| 929 | } | 929 | } | |||
| 930 | 930 | |||||
| 931 | @keyframes flipInY { | 931 | @keyframes flipInY { | |||
| 932 | 0% { | 932 | 0% { | |||
| 933 | transform: perspective(400px) rotate3d(0,1,0,90deg); | 933 | transform: perspective(400px) rotate3d(0,1,0,90deg); | |||
| 934 | transition-timing-function: ease-in; | 934 | transition-timing-function: ease-in; | |||
| 935 | opacity: 0 | 935 | opacity: 0 | |||
| 936 | } | 936 | } | |||
| 937 | 937 | |||||
| 938 | 40% { | 938 | 40% { | |||
| 939 | transform: perspective(400px) rotate3d(0,1,0,-20deg); | 939 | transform: perspective(400px) rotate3d(0,1,0,-20deg); | |||
| 940 | transition-timing-function: ease-in | 940 | transition-timing-function: ease-in | |||
| 941 | } | 941 | } | |||
| 942 | 942 | |||||
| 943 | 60% { | 943 | 60% { | |||
| 944 | transform: perspective(400px) rotate3d(0,1,0,10deg); | 944 | transform: perspective(400px) rotate3d(0,1,0,10deg); | |||
| 945 | opacity: 1 | 945 | opacity: 1 | |||
| 946 | } | 946 | } | |||
| 947 | 947 | |||||
| 948 | 80% { | 948 | 80% { | |||
| 949 | transform: perspective(400px) rotate3d(0,1,0,-5deg) | 949 | transform: perspective(400px) rotate3d(0,1,0,-5deg) | |||
| 950 | } | 950 | } | |||
| 951 | 951 | |||||
| 952 | 100% { | 952 | 100% { | |||
| 953 | transform: perspective(400px) | 953 | transform: perspective(400px) | |||
| 954 | } | 954 | } | |||
| 955 | } | 955 | } | |||
| 956 | 956 | |||||
| 957 | .flipInY { | 957 | .flipInY { | |||
| 958 | -webkit-backface-visibility: visible!important; | 958 | -webkit-backface-visibility: visible!important; | |||
| 959 | backface-visibility: visible!important; | 959 | backface-visibility: visible!important; | |||
| 960 | animation-name: flipInY | 960 | animation-name: flipInY | |||
| 961 | } | 961 | } | |||
| 962 | @keyframes lightSpeedIn { | 962 | @keyframes lightSpeedIn { | |||
| 963 | 0% { | 963 | 0% { | |||
| 964 | -webkit-transform: translateX(100%) skewX(-30deg); | 964 | -webkit-transform: translateX(100%) skewX(-30deg); | |||
| 965 | -ms-transform: translateX(100%) skewX(-30deg); | 965 | -ms-transform: translateX(100%) skewX(-30deg); | |||
| 966 | transform: translateX(100%) skewX(-30deg); | 966 | transform: translateX(100%) skewX(-30deg); | |||
| 967 | opacity: 0; | 967 | opacity: 0; | |||
| 968 | } | 968 | } | |||
| 969 | 969 | |||||
| 970 | 60% { | 970 | 60% { | |||
| 971 | -webkit-transform: translateX(-20%) skewX(30deg); | 971 | -webkit-transform: translateX(-20%) skewX(30deg); | |||
| 972 | -ms-transform: translateX(-20%) skewX(30deg); | 972 | -ms-transform: translateX(-20%) skewX(30deg); | |||
| 973 | transform: translateX(-20%) skewX(30deg); | 973 | transform: translateX(-20%) skewX(30deg); | |||
| 974 | opacity: 1; | 974 | opacity: 1; | |||
| 975 | } | 975 | } | |||
| 976 | 976 | |||||
| 977 | 80% { | 977 | 80% { | |||
| 978 | -webkit-transform: translateX(0%) skewX(-15deg); | 978 | -webkit-transform: translateX(0%) skewX(-15deg); | |||
| 979 | -ms-transform: translateX(0%) skewX(-15deg); | 979 | -ms-transform: translateX(0%) skewX(-15deg); | |||
| 980 | transform: translateX(0%) skewX(-15deg); | 980 | transform: translateX(0%) skewX(-15deg); | |||
| 981 | opacity: 1; | 981 | opacity: 1; | |||
| 982 | } | 982 | } | |||
| 983 | 983 | |||||
| 984 | 100% { | 984 | 100% { | |||
| 985 | -webkit-transform: translateX(0%) skewX(0deg); | 985 | -webkit-transform: translateX(0%) skewX(0deg); | |||
| 986 | -ms-transform: translateX(0%) skewX(0deg); | 986 | -ms-transform: translateX(0%) skewX(0deg); | |||
| 987 | transform: translateX(0%) skewX(0deg); | 987 | transform: translateX(0%) skewX(0deg); | |||
| 988 | opacity: 1; | 988 | opacity: 1; | |||
| 989 | } | 989 | } | |||
| 990 | } | 990 | } | |||
| 991 | 991 | |||||
| 992 | .lightSpeedIn { | 992 | .lightSpeedIn { | |||
| 993 | -webkit-animation-name: lightSpeedIn; | 993 | -webkit-animation-name: lightSpeedIn; | |||
| 994 | animation-name: lightSpeedIn; | 994 | animation-name: lightSpeedIn; | |||
| 995 | -webkit-animation-timing-function: ease-out; | 995 | -webkit-animation-timing-function: ease-out; | |||
| 996 | animation-timing-function: ease-out; | 996 | animation-timing-function: ease-out; | |||
| 997 | } | 997 | } |
Araxis Merge (but not the data content of this report) is Copyright © 1993–2019 Araxis Ltd (www.araxis.com). All rights reserved.