├── readme.md ├── index.html └── style.css /readme.md: -------------------------------------------------------------------------------- 1 | # CSS3 Transition Blocks 2 | 3 | ## Post 4 | 5 | - [https://f90.co.uk/labs/css3-transition-blocks/](https://f90.co.uk/labs/css3-transition-blocks/) 6 | 7 | ## Example 8 | 9 | - [http://orangespaceman.github.io/css3-transition-blocks](http://orangespaceman.github.io/css3-transition-blocks) 10 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CSS3 Transition Blocks 4 | 5 | 6 | 7 | 8 | 9 |
10 |

0

11 |

1

12 |

2

13 |

3

14 |

4

15 |

5

16 |

6

17 |

7

18 |

8

19 |

9

20 |

10

21 |

11

22 |

12

23 |

13

24 |

14

25 |

15

26 |

16

27 |

17

28 |

18

29 |

19

30 |

20

31 |

21

32 |

22

33 |

23

34 |

24

35 |

25

36 |
37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | background: #fff; 6 | } 7 | 8 | body { 9 | position: relative; 10 | } 11 | 12 | p.el { 13 | position:absolute; 14 | text-align:center; 15 | } 16 | 17 | @-webkit-keyframes el-0 { 18 | from { 19 | background:rgba(96, 69, 248, 0.62); 20 | left:79%; 21 | top:89%; 22 | width:23px; 23 | height:53px; 24 | z-index:26; 25 | line-height:53px; 26 | opacity:0.47; 27 | text-shadow: rgba(8, 60, 23, 0.83) 9px -7px 7px; 28 | -webkit-transform: scale(0.56) rotate(65deg); 29 | } 30 | to { 31 | background:rgba(100, 165, 96, 0.77); 32 | left:65%; 33 | top:66%; 34 | width:95px; 35 | height:53px; 36 | z-index:45; 37 | line-height:95px; 38 | opacity:0.81; 39 | text-shadow: rgba(7, 20, 87, 0.48) 6px -2px 5px; 40 | -webkit-transform: scale(0.69) rotate(337deg); 41 | } 42 | } 43 | 44 | p#el-0 { 45 | -webkit-animation-name: el-0; 46 | -webkit-animation-duration: 5s; 47 | -webkit-animation-direction: alternate; 48 | -webkit-animation-timing-function: ease-in-out; 49 | -webkit-animation-iteration-count: infinite; 50 | } 51 | 52 | 53 | @-webkit-keyframes el-1 { 54 | from { 55 | background:rgba(115, 209, 80, 0.06); 56 | left:5%; 57 | top:15%; 58 | width:93px; 59 | height:39px; 60 | z-index:34; 61 | line-height:39px; 62 | opacity:0.75; 63 | text-shadow: rgba(97, 86, 15, 0.62) 3px -10px 3px; 64 | -webkit-transform: scale(1.4) rotate(303deg); 65 | } 66 | to { 67 | background:rgba(40, 183, 231, 0.36); 68 | left:59%; 69 | top:38%; 70 | width:15px; 71 | height:89px; 72 | z-index:37; 73 | line-height:89px; 74 | opacity:0.83; 75 | text-shadow: rgba(13, 66, 18, 0.36) 2px -10px 7px; 76 | -webkit-transform: scale(0.66) rotate(14deg); 77 | } 78 | } 79 | 80 | p#el-1 { 81 | -webkit-animation-name: el-1; 82 | -webkit-animation-duration: 9s; 83 | -webkit-animation-direction: alternate; 84 | -webkit-animation-timing-function: ease-in-out; 85 | -webkit-animation-iteration-count: infinite; 86 | } 87 | 88 | 89 | @-webkit-keyframes el-2 { 90 | from { 91 | background:rgba(183, 145, 11, 0.58); 92 | left:71%; 93 | top:66%; 94 | width:85px; 95 | height:25px; 96 | z-index:32; 97 | line-height:25px; 98 | opacity:0.92; 99 | text-shadow: rgba(70, 47, 9, 0.42) 4px -5px 1px; 100 | -webkit-transform: scale(1.26) rotate(130deg); 101 | } 102 | to { 103 | background:rgba(187, 149, 125, 0.4); 104 | left:76%; 105 | top:85%; 106 | width:21px; 107 | height:45px; 108 | z-index:38; 109 | line-height:45px; 110 | opacity:0.52; 111 | text-shadow: rgba(67, 79, 34, 0.74) 6px -10px 8px; 112 | -webkit-transform: scale(0.58) rotate(224deg); 113 | } 114 | } 115 | 116 | p#el-2 { 117 | -webkit-animation-name: el-2; 118 | -webkit-animation-duration: 6s; 119 | -webkit-animation-direction: alternate; 120 | -webkit-animation-timing-function: ease-in-out; 121 | -webkit-animation-iteration-count: infinite; 122 | } 123 | 124 | 125 | @-webkit-keyframes el-3 { 126 | from { 127 | background:rgba(64, 93, 154, 0.71); 128 | left:45%; 129 | top:3%; 130 | width:87px; 131 | height:42px; 132 | z-index:45; 133 | line-height:42px; 134 | opacity:0.03; 135 | text-shadow: rgba(84, 25, 76, 0.42) 8px -2px 2px; 136 | -webkit-transform: scale(1.08) rotate(239deg); 137 | } 138 | to { 139 | background:rgba(239, 27, 86, 0.73); 140 | left:44%; 141 | top:8%; 142 | width:39px; 143 | height:92px; 144 | z-index:18; 145 | line-height:92px; 146 | opacity:0.85; 147 | text-shadow: rgba(33, 97, 30, 0.23) 3px -7px 9px; 148 | -webkit-transform: scale(1.44) rotate(37deg); 149 | } 150 | } 151 | 152 | p#el-3 { 153 | -webkit-animation-name: el-3; 154 | -webkit-animation-duration: 9s; 155 | -webkit-animation-direction: alternate; 156 | -webkit-animation-timing-function: ease-in-out; 157 | -webkit-animation-iteration-count: infinite; 158 | } 159 | 160 | 161 | @-webkit-keyframes el-4 { 162 | from { 163 | background:rgba(251, 225, 220, 0.23); 164 | left:64%; 165 | top:29%; 166 | width:97px; 167 | height:21px; 168 | z-index:41; 169 | line-height:21px; 170 | opacity:0.47; 171 | text-shadow: rgba(54, 47, 41, 0.64) 9px -2px 1px; 172 | -webkit-transform: scale(1.38) rotate(137deg); 173 | } 174 | to { 175 | background:rgba(112, 188, 182, 0.41); 176 | left:3%; 177 | top:94%; 178 | width:70px; 179 | height:31px; 180 | z-index:35; 181 | line-height:31px; 182 | opacity:0.77; 183 | text-shadow: rgba(56, 79, 62, 0.58) 8px -6px 5px; 184 | -webkit-transform: scale(0.5) rotate(54deg); 185 | } 186 | } 187 | 188 | p#el-4 { 189 | -webkit-animation-name: el-4; 190 | -webkit-animation-duration: 8s; 191 | -webkit-animation-direction: alternate; 192 | -webkit-animation-timing-function: ease-in-out; 193 | -webkit-animation-iteration-count: infinite; 194 | } 195 | 196 | 197 | @-webkit-keyframes el-5 { 198 | from { 199 | background:rgba(244, 52, 127, 0.42); 200 | left:61%; 201 | top:14%; 202 | width:38px; 203 | height:97px; 204 | z-index:38; 205 | line-height:97px; 206 | opacity:0.22; 207 | text-shadow: rgba(11, 13, 66, 0.83) 9px -1px 9px; 208 | -webkit-transform: scale(1.28) rotate(250deg); 209 | } 210 | to { 211 | background:rgba(142, 141, 66, 0.35); 212 | left:18%; 213 | top:84%; 214 | width:29px; 215 | height:97px; 216 | z-index:35; 217 | line-height:97px; 218 | opacity:0.29; 219 | text-shadow: rgba(12, 83, 2, 0.08) 8px -3px 6px; 220 | -webkit-transform: scale(0.71) rotate(299deg); 221 | } 222 | } 223 | 224 | p#el-5 { 225 | -webkit-animation-name: el-5; 226 | -webkit-animation-duration: 8s; 227 | -webkit-animation-direction: alternate; 228 | -webkit-animation-timing-function: ease-in-out; 229 | -webkit-animation-iteration-count: infinite; 230 | } 231 | 232 | 233 | @-webkit-keyframes el-6 { 234 | from { 235 | background:rgba(147, 238, 137, 0.7); 236 | left:59%; 237 | top:37%; 238 | width:63px; 239 | height:54px; 240 | z-index:33; 241 | line-height:54px; 242 | opacity:0.24; 243 | text-shadow: rgba(32, 35, 79, 0.87) 7px -2px 1px; 244 | -webkit-transform: scale(0.95) rotate(92deg); 245 | } 246 | to { 247 | background:rgba(188, 188, 96, 0.57); 248 | left:75%; 249 | top:45%; 250 | width:49px; 251 | height:54px; 252 | z-index:49; 253 | line-height:54px; 254 | opacity:0.03; 255 | text-shadow: rgba(57, 80, 73, 0.01) 4px -7px 6px; 256 | -webkit-transform: scale(0.57) rotate(92deg); 257 | } 258 | } 259 | 260 | p#el-6 { 261 | -webkit-animation-name: el-6; 262 | -webkit-animation-duration: 10s; 263 | -webkit-animation-direction: alternate; 264 | -webkit-animation-timing-function: ease-in-out; 265 | -webkit-animation-iteration-count: infinite; 266 | } 267 | 268 | 269 | @-webkit-keyframes el-7 { 270 | from { 271 | background:rgba(233, 37, 240, 0.27); 272 | left:93%; 273 | top:81%; 274 | width:90px; 275 | height:70px; 276 | z-index:4; 277 | line-height:70px; 278 | opacity:0.86; 279 | text-shadow: rgba(32, 33, 59, 0.06) 8px -2px 9px; 280 | -webkit-transform: scale(0.65) rotate(189deg); 281 | } 282 | to { 283 | background:rgba(200, 47, 24, 0.59); 284 | left:91%; 285 | top:10%; 286 | width:98px; 287 | height:70px; 288 | z-index:30; 289 | line-height:70px; 290 | opacity:0.63; 291 | text-shadow: rgba(5, 84, 53, 0.66) 8px -7px 7px; 292 | -webkit-transform: scale(0.51) rotate(218deg); 293 | } 294 | } 295 | 296 | p#el-7 { 297 | -webkit-animation-name: el-7; 298 | -webkit-animation-duration: 6s; 299 | -webkit-animation-direction: alternate; 300 | -webkit-animation-timing-function: ease-in-out; 301 | -webkit-animation-iteration-count: infinite; 302 | } 303 | 304 | 305 | @-webkit-keyframes el-8 { 306 | from { 307 | background:rgba(173, 70, 53, 0.01); 308 | left:87%; 309 | top:26%; 310 | width:77px; 311 | height:91px; 312 | z-index:2; 313 | line-height:91px; 314 | opacity:0.07; 315 | text-shadow: rgba(86, 56, 84, 0.05) 7px -5px 10px; 316 | -webkit-transform: scale(1.25) rotate(144deg); 317 | } 318 | to { 319 | background:rgba(139, 95, 114, 0.39); 320 | left:90%; 321 | top:11%; 322 | width:31px; 323 | height:91px; 324 | z-index:29; 325 | line-height:91px; 326 | opacity:0.71; 327 | text-shadow: rgba(16, 18, 13, 0.04) 9px -4px 3px; 328 | -webkit-transform: scale(1.36) rotate(96deg); 329 | } 330 | } 331 | 332 | p#el-8 { 333 | -webkit-animation-name: el-8; 334 | -webkit-animation-duration: 6s; 335 | -webkit-animation-direction: alternate; 336 | -webkit-animation-timing-function: ease-in-out; 337 | -webkit-animation-iteration-count: infinite; 338 | } 339 | 340 | 341 | @-webkit-keyframes el-9 { 342 | from { 343 | background:rgba(78, 144, 108, 0.86); 344 | left:41%; 345 | top:47%; 346 | width:61px; 347 | height:65px; 348 | z-index:43; 349 | line-height:65px; 350 | opacity:0.43; 351 | text-shadow: rgba(26, 25, 97, 0.62) 7px -4px 6px; 352 | -webkit-transform: scale(1.3) rotate(177deg); 353 | } 354 | to { 355 | background:rgba(25, 131, 164, 0.28); 356 | left:64%; 357 | top:68%; 358 | width:30px; 359 | height:65px; 360 | z-index:2; 361 | line-height:65px; 362 | opacity:0.92; 363 | text-shadow: rgba(98, 31, 42, 0.54) 7px -10px 10px; 364 | -webkit-transform: scale(0.97) rotate(141deg); 365 | } 366 | } 367 | 368 | p#el-9 { 369 | -webkit-animation-name: el-9; 370 | -webkit-animation-duration: 6s; 371 | -webkit-animation-direction: alternate; 372 | -webkit-animation-timing-function: ease-in-out; 373 | -webkit-animation-iteration-count: infinite; 374 | } 375 | 376 | 377 | @-webkit-keyframes el-10 { 378 | from { 379 | background:rgba(61, 219, 60, 0.48); 380 | left:83%; 381 | top:85%; 382 | width:33px; 383 | height:99px; 384 | z-index:10; 385 | line-height:99px; 386 | opacity:0.38; 387 | text-shadow: rgba(97, 67, 48, 0.49) 4px -8px 2px; 388 | -webkit-transform: scale(1.5) rotate(318deg); 389 | } 390 | to { 391 | background:rgba(41, 235, 222, 0.47); 392 | left:34%; 393 | top:41%; 394 | width:25px; 395 | height:99px; 396 | z-index:17; 397 | line-height:99px; 398 | opacity:0.38; 399 | text-shadow: rgba(54, 71, 81, 0.52) 10px -7px 8px; 400 | -webkit-transform: scale(0.93) rotate(180deg); 401 | } 402 | } 403 | 404 | p#el-10 { 405 | -webkit-animation-name: el-10; 406 | -webkit-animation-duration: 7s; 407 | -webkit-animation-direction: alternate; 408 | -webkit-animation-timing-function: ease-in-out; 409 | -webkit-animation-iteration-count: infinite; 410 | } 411 | @-webkit-keyframes el-11 { 412 | from { 413 | background:rgba(174, 252, 147, 0.36); 414 | left:46%; 415 | top:6%; 416 | width:74px; 417 | height:68px; 418 | z-index:11; 419 | line-height:68px; 420 | opacity:0.19; 421 | text-shadow: rgba(67, 10, 35, 0.59) 10px -9px 10px; 422 | -webkit-transform: scale(0.88) rotate(318deg); 423 | } 424 | to { 425 | background:rgba(65, 193, 108, 0.96); 426 | left:57%; 427 | top:93%; 428 | width:94px; 429 | height:68px; 430 | z-index:12; 431 | line-height:68px; 432 | opacity:0.68; 433 | text-shadow: rgba(35, 73, 29, 0.95) 5px -3px 6px; 434 | -webkit-transform: scale(1.28) rotate(266deg); 435 | } 436 | } 437 | 438 | p#el-11 { 439 | -webkit-animation-name: el-11; 440 | -webkit-animation-duration: 7s; 441 | -webkit-animation-direction: alternate; 442 | -webkit-animation-timing-function: ease-in-out; 443 | -webkit-animation-iteration-count: infinite; 444 | } 445 | 446 | 447 | @-webkit-keyframes el-12 { 448 | from { 449 | background:rgba(244, 198, 30, 0.06); 450 | left:12%; 451 | top:70%; 452 | width:21px; 453 | height:56px; 454 | z-index:47; 455 | line-height:56px; 456 | opacity:0.63; 457 | text-shadow: rgba(40, 80, 88, 0.15) 3px -9px 8px; 458 | -webkit-transform: scale(0.66) rotate(280deg); 459 | } 460 | to { 461 | background:rgba(244, 217, 33, 0.69); 462 | left:15%; 463 | top:9%; 464 | width:28px; 465 | height:56px; 466 | z-index:21; 467 | line-height:56px; 468 | opacity:0.61; 469 | text-shadow: rgba(88, 16, 20, 0.33) 2px -10px 5px; 470 | -webkit-transform: scale(0.66) rotate(33deg); 471 | } 472 | } 473 | 474 | p#el-12 { 475 | -webkit-animation-name: el-12; 476 | -webkit-animation-duration: 4s; 477 | -webkit-animation-direction: alternate; 478 | -webkit-animation-timing-function: ease-in-out; 479 | -webkit-animation-iteration-count: infinite; 480 | } 481 | 482 | 483 | @-webkit-keyframes el-13 { 484 | from { 485 | background:rgba(5, 202, 148, 0.82); 486 | left:68%; 487 | top:73%; 488 | width:24px; 489 | height:34px; 490 | z-index:27; 491 | line-height:34px; 492 | opacity:0.45; 493 | text-shadow: rgba(22, 32, 40, 0.07) 5px -1px 3px; 494 | -webkit-transform: scale(1.03) rotate(74deg); 495 | } 496 | to { 497 | background:rgba(161, 36, 24, 0.78); 498 | left:34%; 499 | top:42%; 500 | width:92px; 501 | height:34px; 502 | z-index:16; 503 | line-height:34px; 504 | opacity:0.87; 505 | text-shadow: rgba(7, 41, 3, 0.25) 5px -9px 9px; 506 | -webkit-transform: scale(0.75) rotate(178deg); 507 | } 508 | } 509 | 510 | p#el-13 { 511 | -webkit-animation-name: el-13; 512 | -webkit-animation-duration: 7s; 513 | -webkit-animation-direction: alternate; 514 | -webkit-animation-timing-function: ease-in-out; 515 | -webkit-animation-iteration-count: infinite; 516 | } 517 | 518 | 519 | @-webkit-keyframes el-14 { 520 | from { 521 | background:rgba(8, 254, 135, 0.34); 522 | left:40%; 523 | top:60%; 524 | width:83px; 525 | height:45px; 526 | z-index:25; 527 | line-height:45px; 528 | opacity:0.81; 529 | text-shadow: rgba(31, 70, 44, 0.45) 8px -3px 8px; 530 | -webkit-transform: scale(0.71) rotate(45deg); 531 | } 532 | to { 533 | background:rgba(28, 21, 48, 0.51); 534 | left:11%; 535 | top:43%; 536 | width:96px; 537 | height:45px; 538 | z-index:47; 539 | line-height:45px; 540 | opacity:0.25; 541 | text-shadow: rgba(20, 41, 80, 0.51) 5px -8px 1px; 542 | -webkit-transform: scale(1.29) rotate(69deg); 543 | } 544 | } 545 | 546 | p#el-14 { 547 | -webkit-animation-name: el-14; 548 | -webkit-animation-duration: 8s; 549 | -webkit-animation-direction: alternate; 550 | -webkit-animation-timing-function: ease-in-out; 551 | -webkit-animation-iteration-count: infinite; 552 | } 553 | 554 | 555 | @-webkit-keyframes el-15 { 556 | from { 557 | background:rgba(175, 115, 225, 0.38); 558 | left:88%; 559 | top:33%; 560 | width:33px; 561 | height:66px; 562 | z-index:6; 563 | line-height:66px; 564 | opacity:0.13; 565 | text-shadow: rgba(38, 25, 23, 0.46) 5px -8px 6px; 566 | -webkit-transform: scale(1.37) rotate(247deg); 567 | } 568 | to { 569 | background:rgba(124, 30, 225, 0.89); 570 | left:91%; 571 | top:39%; 572 | width:47px; 573 | height:66px; 574 | z-index:36; 575 | line-height:66px; 576 | opacity:0.42; 577 | text-shadow: rgba(13, 90, 6, 0.69) 6px -6px 6px; 578 | -webkit-transform: scale(1.48) rotate(142deg); 579 | } 580 | } 581 | 582 | p#el-15 { 583 | -webkit-animation-name: el-15; 584 | -webkit-animation-duration: 10s; 585 | -webkit-animation-direction: alternate; 586 | -webkit-animation-timing-function: ease-in-out; 587 | -webkit-animation-iteration-count: infinite; 588 | } 589 | 590 | 591 | @-webkit-keyframes el-16 { 592 | from { 593 | background:rgba(131, 9, 133, 0.75); 594 | left:27%; 595 | top:98%; 596 | width:34px; 597 | height:31px; 598 | z-index:1; 599 | line-height:31px; 600 | opacity:0.54; 601 | text-shadow: rgba(5, 69, 3, 0.16) 6px -10px 1px; 602 | -webkit-transform: scale(1.47) rotate(96deg); 603 | } 604 | to { 605 | background:rgba(202, 99, 101, 0.69); 606 | left:45%; 607 | top:9%; 608 | width:43px; 609 | height:31px; 610 | z-index:48; 611 | line-height:31px; 612 | opacity:0.67; 613 | text-shadow: rgba(26, 35, 58, 0.4) 9px -7px 10px; 614 | -webkit-transform: scale(1.11) rotate(316deg); 615 | } 616 | } 617 | 618 | p#el-16 { 619 | -webkit-animation-name: el-16; 620 | -webkit-animation-duration: 10s; 621 | -webkit-animation-direction: alternate; 622 | -webkit-animation-timing-function: ease-in-out; 623 | -webkit-animation-iteration-count: infinite; 624 | } 625 | 626 | 627 | @-webkit-keyframes el-17 { 628 | from { 629 | background:rgba(226, 114, 216, 0.58); 630 | left:47%; 631 | top:1%; 632 | width:32px; 633 | height:84px; 634 | z-index:21; 635 | line-height:84px; 636 | opacity:0.09; 637 | text-shadow: rgba(12, 67, 87, 0.51) 1px -6px 10px; 638 | -webkit-transform: scale(0.65) rotate(307deg); 639 | } 640 | to { 641 | background:rgba(232, 210, 28, 0.26); 642 | left:40%; 643 | top:51%; 644 | width:29px; 645 | height:84px; 646 | z-index:1; 647 | line-height:84px; 648 | opacity:0.43; 649 | text-shadow: rgba(73, 89, 33, 0.53) 8px -8px 4px; 650 | -webkit-transform: scale(0.86) rotate(88deg); 651 | } 652 | } 653 | 654 | p#el-17 { 655 | -webkit-animation-name: el-17; 656 | -webkit-animation-duration: 6s; 657 | -webkit-animation-direction: alternate; 658 | -webkit-animation-timing-function: ease-in-out; 659 | -webkit-animation-iteration-count: infinite; 660 | } 661 | 662 | 663 | @-webkit-keyframes el-18 { 664 | from { 665 | background:rgba(165, 119, 162, 0.32); 666 | left:34%; 667 | top:15%; 668 | width:50px; 669 | height:61px; 670 | z-index:46; 671 | line-height:61px; 672 | opacity:0.1; 673 | text-shadow: rgba(53, 75, 1, 0.35) 9px -3px 8px; 674 | -webkit-transform: scale(0.87) rotate(137deg); 675 | } 676 | to { 677 | background:rgba(196, 204, 28, 0.66); 678 | left:13%; 679 | top:64%; 680 | width:55px; 681 | height:61px; 682 | z-index:45; 683 | line-height:61px; 684 | opacity:0.02; 685 | text-shadow: rgba(79, 14, 39, 0.31) 8px -9px 10px; 686 | -webkit-transform: scale(0.59) rotate(68deg); 687 | } 688 | } 689 | 690 | p#el-18 { 691 | -webkit-animation-name: el-18; 692 | -webkit-animation-duration: 3s; 693 | -webkit-animation-direction: alternate; 694 | -webkit-animation-timing-function: ease-in-out; 695 | -webkit-animation-iteration-count: infinite; 696 | } 697 | 698 | 699 | @-webkit-keyframes el-19 { 700 | from { 701 | background:rgba(25, 48, 3, 0.85); 702 | left:20%; 703 | top:36%; 704 | width:77px; 705 | height:58px; 706 | z-index:23; 707 | line-height:58px; 708 | opacity:0.12; 709 | text-shadow: rgba(9, 84, 88, 0.88) 10px -6px 1px; 710 | -webkit-transform: scale(1.09) rotate(350deg); 711 | } 712 | to { 713 | background:rgba(230, 152, 196, 0.04); 714 | left:98%; 715 | top:8%; 716 | width:86px; 717 | height:58px; 718 | z-index:42; 719 | line-height:58px; 720 | opacity:0.02; 721 | text-shadow: rgba(92, 4, 11, 0.4) 2px -3px 5px; 722 | -webkit-transform: scale(1.48) rotate(174deg); 723 | } 724 | } 725 | 726 | p#el-19 { 727 | -webkit-animation-name: el-19; 728 | -webkit-animation-duration: 9s; 729 | -webkit-animation-direction: alternate; 730 | -webkit-animation-timing-function: ease-in-out; 731 | -webkit-animation-iteration-count: infinite; 732 | } 733 | 734 | 735 | @-webkit-keyframes el-20 { 736 | from { 737 | background:rgba(240, 224, 198, 0.78); 738 | left:75%; 739 | top:65%; 740 | width:78px; 741 | height:75px; 742 | z-index:15; 743 | line-height:75px; 744 | opacity:0.66; 745 | text-shadow: rgba(31, 27, 56, 0.9) 1px -6px 9px; 746 | -webkit-transform: scale(0.6) rotate(151deg); 747 | } 748 | to { 749 | background:rgba(188, 31, 87, 0.76); 750 | left:23%; 751 | top:73%; 752 | width:92px; 753 | height:75px; 754 | z-index:26; 755 | line-height:75px; 756 | opacity:0.14; 757 | text-shadow: rgba(86, 99, 90, 0.55) 10px -8px 4px; 758 | -webkit-transform: scale(1.22) rotate(194deg); 759 | } 760 | } 761 | 762 | p#el-20 { 763 | -webkit-animation-name: el-20; 764 | -webkit-animation-duration: 10s; 765 | -webkit-animation-direction: alternate; 766 | -webkit-animation-timing-function: ease-in-out; 767 | -webkit-animation-iteration-count: infinite; 768 | } 769 | 770 | 771 | @-webkit-keyframes el-21 { 772 | from { 773 | background:rgba(213, 165, 193, 0.1); 774 | left:21%; 775 | top:66%; 776 | width:30px; 777 | height:55px; 778 | z-index:41; 779 | line-height:55px; 780 | opacity:0.56; 781 | text-shadow: rgba(24, 23, 29, 0.36) 6px -1px 6px; 782 | -webkit-transform: scale(0.79) rotate(340deg); 783 | } 784 | to { 785 | background:rgba(24, 111, 207, 0.09); 786 | left:34%; 787 | top:36%; 788 | width:21px; 789 | height:55px; 790 | z-index:7; 791 | line-height:55px; 792 | opacity:0.69; 793 | text-shadow: rgba(73, 66, 67, 0.18) 5px -4px 10px; 794 | -webkit-transform: scale(1.09) rotate(190deg); 795 | } 796 | } 797 | 798 | p#el-21 { 799 | -webkit-animation-name: el-21; 800 | -webkit-animation-duration: 7s; 801 | -webkit-animation-direction: alternate; 802 | -webkit-animation-timing-function: ease-in-out; 803 | -webkit-animation-iteration-count: infinite; 804 | } 805 | 806 | 807 | @-webkit-keyframes el-22 { 808 | from { 809 | background:rgba(85, 38, 245, 0.55); 810 | left:44%; 811 | top:32%; 812 | width:29px; 813 | height:78px; 814 | z-index:25; 815 | line-height:78px; 816 | opacity:0.89; 817 | text-shadow: rgba(41, 44, 98, 0.84) 3px -1px 2px; 818 | -webkit-transform: scale(1.11) rotate(32deg); 819 | } 820 | to { 821 | background:rgba(78, 77, 210, 0.96); 822 | left:97%; 823 | top:99%; 824 | width:56px; 825 | height:78px; 826 | z-index:15; 827 | line-height:78px; 828 | opacity:0.92; 829 | text-shadow: rgba(5, 82, 51, 0.77) 2px -7px 8px; 830 | -webkit-transform: scale(1.21) rotate(33deg); 831 | } 832 | } 833 | 834 | p#el-22 { 835 | -webkit-animation-name: el-22; 836 | -webkit-animation-duration: 3s; 837 | -webkit-animation-direction: alternate; 838 | -webkit-animation-timing-function: ease-in-out; 839 | -webkit-animation-iteration-count: infinite; 840 | } 841 | 842 | 843 | @-webkit-keyframes el-23 { 844 | from { 845 | background:rgba(150, 241, 59, 0.03); 846 | left:93%; 847 | top:8%; 848 | width:41px; 849 | height:86px; 850 | z-index:1; 851 | line-height:86px; 852 | opacity:0.26; 853 | text-shadow: rgba(87, 10, 56, 0.18) 10px -6px 2px; 854 | -webkit-transform: scale(1.41) rotate(352deg); 855 | } 856 | to { 857 | background:rgba(115, 212, 7, 0.27); 858 | left:34%; 859 | top:80%; 860 | width:54px; 861 | height:86px; 862 | z-index:50; 863 | line-height:86px; 864 | opacity:0.53; 865 | text-shadow: rgba(14, 9, 58, 0.95) 7px -6px 2px; 866 | -webkit-transform: scale(1.2) rotate(164deg); 867 | } 868 | } 869 | 870 | p#el-23 { 871 | -webkit-animation-name: el-23; 872 | -webkit-animation-duration: 5s; 873 | -webkit-animation-direction: alternate; 874 | -webkit-animation-timing-function: ease-in-out; 875 | -webkit-animation-iteration-count: infinite; 876 | } 877 | 878 | 879 | @-webkit-keyframes el-24 { 880 | from { 881 | background:rgba(117, 133, 213, 0.55); 882 | left:8%; 883 | top:1%; 884 | width:57px; 885 | height:97px; 886 | z-index:30; 887 | line-height:97px; 888 | opacity:0.16; 889 | text-shadow: rgba(37, 57, 60, 0.2) 6px -9px 6px; 890 | -webkit-transform: scale(0.9) rotate(109deg); 891 | } 892 | to { 893 | background:rgba(138, 238, 112, 0.63); 894 | left:51%; 895 | top:40%; 896 | width:44px; 897 | height:97px; 898 | z-index:2; 899 | line-height:97px; 900 | opacity:0.58; 901 | text-shadow: rgba(99, 49, 84, 0.95) 10px -4px 8px; 902 | -webkit-transform: scale(1) rotate(158deg); 903 | } 904 | } 905 | 906 | p#el-24 { 907 | -webkit-animation-name: el-24; 908 | -webkit-animation-duration: 9s; 909 | -webkit-animation-direction: alternate; 910 | -webkit-animation-timing-function: ease-in-out; 911 | -webkit-animation-iteration-count: infinite; 912 | } 913 | 914 | 915 | @-webkit-keyframes el-25 { 916 | from { 917 | background:rgba(10, 244, 85, 0.61); 918 | left:56%; 919 | top:53%; 920 | width:36px; 921 | height:97px; 922 | z-index:22; 923 | line-height:97px; 924 | opacity:0.08; 925 | text-shadow: rgba(61, 74, 61, 0.54) 2px -3px 1px; 926 | -webkit-transform: scale(1.07) rotate(195deg); 927 | } 928 | to { 929 | background:rgba(21, 39, 138, 0.57); 930 | left:99%; 931 | top:49%; 932 | width:61px; 933 | height:97px; 934 | z-index:19; 935 | line-height:97px; 936 | opacity:0.28; 937 | text-shadow: rgba(2, 80, 8, 0.97) 9px -1px 4px; 938 | -webkit-transform: scale(0.95) rotate(213deg); 939 | } 940 | } 941 | 942 | p#el-25 { 943 | -webkit-animation-name: el-25; 944 | -webkit-animation-duration: 9s; 945 | -webkit-animation-direction: alternate; 946 | -webkit-animation-timing-function: ease-in-out; 947 | -webkit-animation-iteration-count: infinite; 948 | } 949 | --------------------------------------------------------------------------------