Skip to content

Instantly share code, notes, and snippets.

@thedaviddias
Created March 10, 2021 05:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thedaviddias/7d0ff6b191e91351812536f4e4455039 to your computer and use it in GitHub Desktop.
Save thedaviddias/7d0ff6b191e91351812536f4e4455039 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
$anim: (
"1": 474,
"2": 433,
"3": 407,
"4": 458,
"5": 400,
"6": 427,
"7": 441,
"8": 419,
"9": 487,
"10": 442
);
@for $i from 1 through 115 {
$left: $i * 6;
$random: (random(100)+400);
.bar:nth-child(#{$i}) {
left: $left+px;
-webkit-animation-duration: #{$random}+ms;
animation-duration: #{$random}+ms;
}
}
.bar:nth-child(1) {
left: 6px;
-webkit-animation-duration: 434ms;
animation-duration: 434ms;
}
.bar:nth-child(2) {
left: 12px;
-webkit-animation-duration: 446ms;
animation-duration: 446ms;
}
.bar:nth-child(3) {
left: 18px;
-webkit-animation-duration: 443ms;
animation-duration: 443ms;
}
.bar:nth-child(4) {
left: 24px;
-webkit-animation-duration: 421ms;
animation-duration: 421ms;
}
.bar:nth-child(5) {
left: 30px;
-webkit-animation-duration: 448ms;
animation-duration: 448ms;
}
.bar:nth-child(6) {
left: 36px;
-webkit-animation-duration: 436ms;
animation-duration: 436ms;
}
.bar:nth-child(7) {
left: 42px;
-webkit-animation-duration: 477ms;
animation-duration: 477ms;
}
.bar:nth-child(8) {
left: 48px;
-webkit-animation-duration: 412ms;
animation-duration: 412ms;
}
.bar:nth-child(9) {
left: 54px;
-webkit-animation-duration: 491ms;
animation-duration: 491ms;
}
.bar:nth-child(10) {
left: 60px;
-webkit-animation-duration: 491ms;
animation-duration: 491ms;
}
.bar:nth-child(11) {
left: 66px;
-webkit-animation-duration: 418ms;
animation-duration: 418ms;
}
.bar:nth-child(12) {
left: 72px;
-webkit-animation-duration: 410ms;
animation-duration: 410ms;
}
.bar:nth-child(13) {
left: 78px;
-webkit-animation-duration: 479ms;
animation-duration: 479ms;
}
.bar:nth-child(14) {
left: 84px;
-webkit-animation-duration: 461ms;
animation-duration: 461ms;
}
.bar:nth-child(15) {
left: 90px;
-webkit-animation-duration: 434ms;
animation-duration: 434ms;
}
.bar:nth-child(16) {
left: 96px;
-webkit-animation-duration: 475ms;
animation-duration: 475ms;
}
.bar:nth-child(17) {
left: 102px;
-webkit-animation-duration: 479ms;
animation-duration: 479ms;
}
.bar:nth-child(18) {
left: 108px;
-webkit-animation-duration: 450ms;
animation-duration: 450ms;
}
.bar:nth-child(19) {
left: 114px;
-webkit-animation-duration: 492ms;
animation-duration: 492ms;
}
.bar:nth-child(20) {
left: 120px;
-webkit-animation-duration: 473ms;
animation-duration: 473ms;
}
.bar:nth-child(21) {
left: 126px;
-webkit-animation-duration: 468ms;
animation-duration: 468ms;
}
.bar:nth-child(22) {
left: 132px;
-webkit-animation-duration: 480ms;
animation-duration: 480ms;
}
.bar:nth-child(23) {
left: 138px;
-webkit-animation-duration: 413ms;
animation-duration: 413ms;
}
.bar:nth-child(24) {
left: 144px;
-webkit-animation-duration: 402ms;
animation-duration: 402ms;
}
.bar:nth-child(25) {
left: 150px;
-webkit-animation-duration: 497ms;
animation-duration: 497ms;
}
.bar:nth-child(26) {
left: 156px;
-webkit-animation-duration: 410ms;
animation-duration: 410ms;
}
.bar:nth-child(27) {
left: 162px;
-webkit-animation-duration: 498ms;
animation-duration: 498ms;
}
.bar:nth-child(28) {
left: 168px;
-webkit-animation-duration: 486ms;
animation-duration: 486ms;
}
.bar:nth-child(29) {
left: 174px;
-webkit-animation-duration: 480ms;
animation-duration: 480ms;
}
.bar:nth-child(30) {
left: 180px;
-webkit-animation-duration: 410ms;
animation-duration: 410ms;
}
.bar:nth-child(31) {
left: 186px;
-webkit-animation-duration: 454ms;
animation-duration: 454ms;
}
.bar:nth-child(32) {
left: 192px;
-webkit-animation-duration: 422ms;
animation-duration: 422ms;
}
.bar:nth-child(33) {
left: 198px;
-webkit-animation-duration: 447ms;
animation-duration: 447ms;
}
.bar:nth-child(34) {
left: 204px;
-webkit-animation-duration: 446ms;
animation-duration: 446ms;
}
.bar:nth-child(35) {
left: 210px;
-webkit-animation-duration: 482ms;
animation-duration: 482ms;
}
.bar:nth-child(36) {
left: 216px;
-webkit-animation-duration: 434ms;
animation-duration: 434ms;
}
.bar:nth-child(37) {
left: 222px;
-webkit-animation-duration: 420ms;
animation-duration: 420ms;
}
.bar:nth-child(38) {
left: 228px;
-webkit-animation-duration: 417ms;
animation-duration: 417ms;
}
.bar:nth-child(39) {
left: 234px;
-webkit-animation-duration: 476ms;
animation-duration: 476ms;
}
.bar:nth-child(40) {
left: 240px;
-webkit-animation-duration: 475ms;
animation-duration: 475ms;
}
.bar:nth-child(41) {
left: 246px;
-webkit-animation-duration: 499ms;
animation-duration: 499ms;
}
.bar:nth-child(42) {
left: 252px;
-webkit-animation-duration: 499ms;
animation-duration: 499ms;
}
.bar:nth-child(43) {
left: 258px;
-webkit-animation-duration: 449ms;
animation-duration: 449ms;
}
.bar:nth-child(44) {
left: 264px;
-webkit-animation-duration: 498ms;
animation-duration: 498ms;
}
.bar:nth-child(45) {
left: 270px;
-webkit-animation-duration: 426ms;
animation-duration: 426ms;
}
.bar:nth-child(46) {
left: 276px;
-webkit-animation-duration: 486ms;
animation-duration: 486ms;
}
.bar:nth-child(47) {
left: 282px;
-webkit-animation-duration: 404ms;
animation-duration: 404ms;
}
.bar:nth-child(48) {
left: 288px;
-webkit-animation-duration: 480ms;
animation-duration: 480ms;
}
.bar:nth-child(49) {
left: 294px;
-webkit-animation-duration: 462ms;
animation-duration: 462ms;
}
.bar:nth-child(50) {
left: 300px;
-webkit-animation-duration: 406ms;
animation-duration: 406ms;
}
.bar:nth-child(51) {
left: 306px;
-webkit-animation-duration: 499ms;
animation-duration: 499ms;
}
.bar:nth-child(52) {
left: 312px;
-webkit-animation-duration: 484ms;
animation-duration: 484ms;
}
.bar:nth-child(53) {
left: 318px;
-webkit-animation-duration: 423ms;
animation-duration: 423ms;
}
.bar:nth-child(54) {
left: 324px;
-webkit-animation-duration: 415ms;
animation-duration: 415ms;
}
.bar:nth-child(55) {
left: 330px;
-webkit-animation-duration: 423ms;
animation-duration: 423ms;
}
.bar:nth-child(56) {
left: 336px;
-webkit-animation-duration: 424ms;
animation-duration: 424ms;
}
.bar:nth-child(57) {
left: 342px;
-webkit-animation-duration: 413ms;
animation-duration: 413ms;
}
.bar:nth-child(58) {
left: 348px;
-webkit-animation-duration: 471ms;
animation-duration: 471ms;
}
.bar:nth-child(59) {
left: 354px;
-webkit-animation-duration: 484ms;
animation-duration: 484ms;
}
.bar:nth-child(60) {
left: 360px;
-webkit-animation-duration: 478ms;
animation-duration: 478ms;
}
.bar:nth-child(61) {
left: 366px;
-webkit-animation-duration: 480ms;
animation-duration: 480ms;
}
.bar:nth-child(62) {
left: 372px;
-webkit-animation-duration: 475ms;
animation-duration: 475ms;
}
.bar:nth-child(63) {
left: 378px;
-webkit-animation-duration: 420ms;
animation-duration: 420ms;
}
.bar:nth-child(64) {
left: 384px;
-webkit-animation-duration: 477ms;
animation-duration: 477ms;
}
.bar:nth-child(65) {
left: 390px;
-webkit-animation-duration: 461ms;
animation-duration: 461ms;
}
.bar:nth-child(66) {
left: 396px;
-webkit-animation-duration: 443ms;
animation-duration: 443ms;
}
.bar:nth-child(67) {
left: 402px;
-webkit-animation-duration: 468ms;
animation-duration: 468ms;
}
.bar:nth-child(68) {
left: 408px;
-webkit-animation-duration: 485ms;
animation-duration: 485ms;
}
.bar:nth-child(69) {
left: 414px;
-webkit-animation-duration: 463ms;
animation-duration: 463ms;
}
.bar:nth-child(70) {
left: 420px;
-webkit-animation-duration: 483ms;
animation-duration: 483ms;
}
.bar:nth-child(71) {
left: 426px;
-webkit-animation-duration: 460ms;
animation-duration: 460ms;
}
.bar:nth-child(72) {
left: 432px;
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
}
.bar:nth-child(73) {
left: 438px;
-webkit-animation-duration: 422ms;
animation-duration: 422ms;
}
.bar:nth-child(74) {
left: 444px;
-webkit-animation-duration: 430ms;
animation-duration: 430ms;
}
.bar:nth-child(75) {
left: 450px;
-webkit-animation-duration: 403ms;
animation-duration: 403ms;
}
.bar:nth-child(76) {
left: 456px;
-webkit-animation-duration: 468ms;
animation-duration: 468ms;
}
.bar:nth-child(77) {
left: 462px;
-webkit-animation-duration: 483ms;
animation-duration: 483ms;
}
.bar:nth-child(78) {
left: 468px;
-webkit-animation-duration: 455ms;
animation-duration: 455ms;
}
.bar:nth-child(79) {
left: 474px;
-webkit-animation-duration: 446ms;
animation-duration: 446ms;
}
.bar:nth-child(80) {
left: 480px;
-webkit-animation-duration: 430ms;
animation-duration: 430ms;
}
.bar:nth-child(81) {
left: 486px;
-webkit-animation-duration: 486ms;
animation-duration: 486ms;
}
.bar:nth-child(82) {
left: 492px;
-webkit-animation-duration: 485ms;
animation-duration: 485ms;
}
.bar:nth-child(83) {
left: 498px;
-webkit-animation-duration: 437ms;
animation-duration: 437ms;
}
.bar:nth-child(84) {
left: 504px;
-webkit-animation-duration: 430ms;
animation-duration: 430ms;
}
.bar:nth-child(85) {
left: 510px;
-webkit-animation-duration: 449ms;
animation-duration: 449ms;
}
.bar:nth-child(86) {
left: 516px;
-webkit-animation-duration: 455ms;
animation-duration: 455ms;
}
.bar:nth-child(87) {
left: 522px;
-webkit-animation-duration: 467ms;
animation-duration: 467ms;
}
.bar:nth-child(88) {
left: 528px;
-webkit-animation-duration: 455ms;
animation-duration: 455ms;
}
.bar:nth-child(89) {
left: 534px;
-webkit-animation-duration: 448ms;
animation-duration: 448ms;
}
.bar:nth-child(90) {
left: 540px;
-webkit-animation-duration: 407ms;
animation-duration: 407ms;
}
.bar:nth-child(91) {
left: 546px;
-webkit-animation-duration: 491ms;
animation-duration: 491ms;
}
.bar:nth-child(92) {
left: 552px;
-webkit-animation-duration: 454ms;
animation-duration: 454ms;
}
.bar:nth-child(93) {
left: 558px;
-webkit-animation-duration: 479ms;
animation-duration: 479ms;
}
.bar:nth-child(94) {
left: 564px;
-webkit-animation-duration: 433ms;
animation-duration: 433ms;
}
.bar:nth-child(95) {
left: 570px;
-webkit-animation-duration: 434ms;
animation-duration: 434ms;
}
.bar:nth-child(96) {
left: 576px;
-webkit-animation-duration: 475ms;
animation-duration: 475ms;
}
.bar:nth-child(97) {
left: 582px;
-webkit-animation-duration: 467ms;
animation-duration: 467ms;
}
.bar:nth-child(98) {
left: 588px;
-webkit-animation-duration: 477ms;
animation-duration: 477ms;
}
.bar:nth-child(99) {
left: 594px;
-webkit-animation-duration: 471ms;
animation-duration: 471ms;
}
.bar:nth-child(100) {
left: 600px;
-webkit-animation-duration: 445ms;
animation-duration: 445ms;
}
.bar:nth-child(101) {
left: 606px;
-webkit-animation-duration: 407ms;
animation-duration: 407ms;
}
.bar:nth-child(102) {
left: 612px;
-webkit-animation-duration: 443ms;
animation-duration: 443ms;
}
.bar:nth-child(103) {
left: 618px;
-webkit-animation-duration: 441ms;
animation-duration: 441ms;
}
.bar:nth-child(104) {
left: 624px;
-webkit-animation-duration: 424ms;
animation-duration: 424ms;
}
.bar:nth-child(105) {
left: 630px;
-webkit-animation-duration: 403ms;
animation-duration: 403ms;
}
.bar:nth-child(106) {
left: 636px;
-webkit-animation-duration: 411ms;
animation-duration: 411ms;
}
.bar:nth-child(107) {
left: 642px;
-webkit-animation-duration: 430ms;
animation-duration: 430ms;
}
.bar:nth-child(108) {
left: 648px;
-webkit-animation-duration: 491ms;
animation-duration: 491ms;
}
.bar:nth-child(109) {
left: 654px;
-webkit-animation-duration: 436ms;
animation-duration: 436ms;
}
.bar:nth-child(110) {
left: 660px;
-webkit-animation-duration: 463ms;
animation-duration: 463ms;
}
.bar:nth-child(111) {
left: 666px;
-webkit-animation-duration: 470ms;
animation-duration: 470ms;
}
.bar:nth-child(112) {
left: 672px;
-webkit-animation-duration: 438ms;
animation-duration: 438ms;
}
.bar:nth-child(113) {
left: 678px;
-webkit-animation-duration: 454ms;
animation-duration: 454ms;
}
.bar:nth-child(114) {
left: 684px;
-webkit-animation-duration: 454ms;
animation-duration: 454ms;
}
.bar:nth-child(115) {
left: 690px;
-webkit-animation-duration: 478ms;
animation-duration: 478ms;
}
{
"sass": {
"compiler": "dart-sass/1.26.11",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment