API tools faq
paste
austinpimpy

Animated CSS & HTML Fireflies

austinpimpy
Jul 30th, 2020 (edited)
2,116
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 34.55 KB | None | 0 0
raw download clone embed print report
  1. /* Since I did not create this code myself, and it's sourced from an public-coding-project website,
  2. credit to myself is not necessary but appreciated, however credit to Mark is MANDATORY, so copy and
  3. paste the credit for the CSS in your dens, as well as the code below. Right clicking and selecting all the
  4. code will be easiest to paste code in the CSS document (and then just delete the HTML section from the CSS). */
  5.  
  6.  
  7. ===== COPY AND PASTE ALL THE CODE BELOW THIS LINE IN YOUR TERRITORY DESCRIPTION, NOT THE CSS DOCUMENT! =====
  8.  
  9.  
  10. <div class="firefly"></div><div class="firefly"></div><div class="firefly"></div><div class="firefly"></div><div class="firefly"></div><div class="firefly"></div><div class="firefly"></div><div class="firefly"></div><div class="firefly"></div><div class="firefly"></div><div class="firefly"></div><div class="firefly"></div>
  11.  
  12.  
  13. ===== COPY AND PASTE ALL THE CODE BELOW THIS LINE IN YOUR CSS DOCUMENT, NOT THE TERRITORY DESCRIPTION! =====
  14.  
  15.  
  16. /* ANIMATED FIREFLIES: EDITED FOR LIODEN, BY PLAYER =Austin= #43750 */
  17. /* ANIMATED BY MARK GOLUS ON CODEPEN: https://codepen.io/mikegolus/pen/Jegvym */
  18.  
  19. .firefly {
  20.   position: fixed;
  21.   left: 50%;
  22.   top: 50%;
  23.   width: 0.4vw;
  24.   height: 0.4vw;
  25.   margin: -0.2vw 0 0 9.8vw;
  26.   animation: ease 200s alternate infinite;
  27.   pointer-events: none;
  28. }
  29. .firefly::before, .firefly::after {
  30.   content: "";
  31.   position: absolute;
  32.   width: 100%;
  33.   height: 100%;
  34.   border-radius: 50%;
  35.   transform-origin: -10vw;
  36. }
  37. .firefly::before {
  38.   background: black;
  39.   opacity: 0.4;
  40.   animation: drift ease alternate infinite;
  41. }
  42. .firefly::after {
  43.   background: white;
  44.   opacity: 0;
  45.   box-shadow: 0 0 0vw 0vw yellow;
  46.   animation: drift ease alternate infinite, flash ease infinite;
  47. }
  48.  
  49. .firefly:nth-child(1) {
  50.   animation-name: move1;
  51. }
  52. .firefly:nth-child(1)::before {
  53.   animation-duration: 10s;
  54. }
  55. .firefly:nth-child(1)::after {
  56.   animation-duration: 10s, 10540ms;
  57.   animation-delay: 0ms, 6067ms;
  58. }
  59.  
  60. @keyframes move1 {
  61.   0% {
  62.     transform: translateX(-10vw) translateY(-14vh) scale(0.59);
  63.   }
  64.   3.8461538462% {
  65.     transform: translateX(45vw) translateY(24vh) scale(0.32);
  66.   }
  67.   7.6923076923% {
  68.     transform: translateX(12vw) translateY(41vh) scale(0.66);
  69.   }
  70.   11.5384615385% {
  71.     transform: translateX(45vw) translateY(-21vh) scale(0.57);
  72.   }
  73.   15.3846153846% {
  74.     transform: translateX(-28vw) translateY(-27vh) scale(0.74);
  75.   }
  76.   19.2307692308% {
  77.     transform: translateX(34vw) translateY(40vh) scale(0.53);
  78.   }
  79.   23.0769230769% {
  80.     transform: translateX(11vw) translateY(45vh) scale(0.8);
  81.   }
  82.   26.9230769231% {
  83.     transform: translateX(-1vw) translateY(-32vh) scale(0.94);
  84.   }
  85.   30.7692307692% {
  86.     transform: translateX(-16vw) translateY(-41vh) scale(0.48);
  87.   }
  88.   34.6153846154% {
  89.     transform: translateX(4vw) translateY(-17vh) scale(0.95);
  90.   }
  91.   38.4615384615% {
  92.     transform: translateX(23vw) translateY(-12vh) scale(0.34);
  93.   }
  94.   42.3076923077% {
  95.     transform: translateX(30vw) translateY(-12vh) scale(0.47);
  96.   }
  97.   46.1538461538% {
  98.     transform: translateX(-18vw) translateY(-42vh) scale(0.31);
  99.   }
  100.   50% {
  101.     transform: translateX(26vw) translateY(25vh) scale(0.77);
  102.   }
  103.   53.8461538462% {
  104.     transform: translateX(-2vw) translateY(21vh) scale(0.74);
  105.   }
  106.   57.6923076923% {
  107.     transform: translateX(10vw) translateY(-6vh) scale(0.79);
  108.   }
  109.   61.5384615385% {
  110.     transform: translateX(-10vw) translateY(46vh) scale(0.37);
  111.   }
  112.   65.3846153846% {
  113.     transform: translateX(5vw) translateY(5vh) scale(0.6);
  114.   }
  115.   69.2307692308% {
  116.     transform: translateX(-44vw) translateY(39vh) scale(0.99);
  117.   }
  118.   73.0769230769% {
  119.     transform: translateX(-35vw) translateY(-36vh) scale(0.6);
  120.   }
  121.   76.9230769231% {
  122.     transform: translateX(-39vw) translateY(21vh) scale(0.81);
  123.   }
  124.   80.7692307692% {
  125.     transform: translateX(41vw) translateY(30vh) scale(0.28);
  126.   }
  127.   84.6153846154% {
  128.     transform: translateX(0vw) translateY(9vh) scale(0.27);
  129.   }
  130.   88.4615384615% {
  131.     transform: translateX(-42vw) translateY(-42vh) scale(0.61);
  132.   }
  133.   92.3076923077% {
  134.     transform: translateX(27vw) translateY(-4vh) scale(0.92);
  135.   }
  136.   96.1538461538% {
  137.     transform: translateX(48vw) translateY(1vh) scale(0.62);
  138.   }
  139.   100% {
  140.     transform: translateX(7vw) translateY(-35vh) scale(0.31);
  141.   }
  142. }
  143. .firefly:nth-child(2) {
  144.   animation-name: move2;
  145. }
  146. .firefly:nth-child(2)::before {
  147.   animation-duration: 9s;
  148. }
  149. .firefly:nth-child(2)::after {
  150.   animation-duration: 9s, 6460ms;
  151.   animation-delay: 0ms, 4145ms;
  152. }
  153.  
  154. @keyframes move2 {
  155.   0% {
  156.     transform: translateX(44vw) translateY(-39vh) scale(0.85);
  157.   }
  158.   3.7037037037% {
  159.     transform: translateX(47vw) translateY(49vh) scale(0.73);
  160.   }
  161.   7.4074074074% {
  162.     transform: translateX(-28vw) translateY(-44vh) scale(0.68);
  163.   }
  164.   11.1111111111% {
  165.     transform: translateX(19vw) translateY(2vh) scale(0.44);
  166.   }
  167.   14.8148148148% {
  168.     transform: translateX(-15vw) translateY(-31vh) scale(0.43);
  169.   }
  170.   18.5185185185% {
  171.     transform: translateX(11vw) translateY(-11vh) scale(0.47);
  172.   }
  173.   22.2222222222% {
  174.     transform: translateX(-40vw) translateY(25vh) scale(1);
  175.   }
  176.   25.9259259259% {
  177.     transform: translateX(38vw) translateY(6vh) scale(0.62);
  178.   }
  179.   29.6296296296% {
  180.     transform: translateX(7vw) translateY(44vh) scale(0.28);
  181.   }
  182.   33.3333333333% {
  183.     transform: translateX(34vw) translateY(-9vh) scale(0.56);
  184.   }
  185.   37.037037037% {
  186.     transform: translateX(-45vw) translateY(-26vh) scale(0.26);
  187.   }
  188.   40.7407407407% {
  189.     transform: translateX(12vw) translateY(10vh) scale(1);
  190.   }
  191.   44.4444444444% {
  192.     transform: translateX(42vw) translateY(5vh) scale(0.78);
  193.   }
  194.   48.1481481481% {
  195.     transform: translateX(-24vw) translateY(50vh) scale(0.36);
  196.   }
  197.   51.8518518519% {
  198.     transform: translateX(-14vw) translateY(-37vh) scale(0.49);
  199.   }
  200.   55.5555555556% {
  201.     transform: translateX(-45vw) translateY(-46vh) scale(0.65);
  202.   }
  203.   59.2592592593% {
  204.     transform: translateX(-8vw) translateY(-19vh) scale(0.82);
  205.   }
  206.   62.962962963% {
  207.     transform: translateX(27vw) translateY(5vh) scale(0.38);
  208.   }
  209.   66.6666666667% {
  210.     transform: translateX(7vw) translateY(16vh) scale(0.97);
  211.   }
  212.   70.3703703704% {
  213.     transform: translateX(-14vw) translateY(16vh) scale(0.88);
  214.   }
  215.   74.0740740741% {
  216.     transform: translateX(-36vw) translateY(36vh) scale(0.56);
  217.   }
  218.   77.7777777778% {
  219.     transform: translateX(-31vw) translateY(-27vh) scale(0.55);
  220.   }
  221.   81.4814814815% {
  222.     transform: translateX(37vw) translateY(21vh) scale(0.46);
  223.   }
  224.   85.1851851852% {
  225.     transform: translateX(25vw) translateY(20vh) scale(0.65);
  226.   }
  227.   88.8888888889% {
  228.     transform: translateX(34vw) translateY(37vh) scale(0.54);
  229.   }
  230.   92.5925925926% {
  231.     transform: translateX(24vw) translateY(-3vh) scale(0.6);
  232.   }
  233.   96.2962962963% {
  234.     transform: translateX(-30vw) translateY(37vh) scale(0.64);
  235.   }
  236.   100% {
  237.     transform: translateX(8vw) translateY(-7vh) scale(0.99);
  238.   }
  239. }
  240. .firefly:nth-child(3) {
  241.   animation-name: move3;
  242. }
  243. .firefly:nth-child(3)::before {
  244.   animation-duration: 9s;
  245. }
  246. .firefly:nth-child(3)::after {
  247.   animation-duration: 9s, 6410ms;
  248.   animation-delay: 0ms, 4219ms;
  249. }
  250.  
  251. @keyframes move3 {
  252.   0% {
  253.     transform: translateX(28vw) translateY(13vh) scale(0.47);
  254.   }
  255.   5.5555555556% {
  256.     transform: translateX(45vw) translateY(34vh) scale(0.36);
  257.   }
  258.   11.1111111111% {
  259.     transform: translateX(-25vw) translateY(-6vh) scale(0.87);
  260.   }
  261.   16.6666666667% {
  262.     transform: translateX(-40vw) translateY(40vh) scale(0.46);
  263.   }
  264.   22.2222222222% {
  265.     transform: translateX(40vw) translateY(-49vh) scale(0.54);
  266.   }
  267.   27.7777777778% {
  268.     transform: translateX(-15vw) translateY(33vh) scale(0.69);
  269.   }
  270.   33.3333333333% {
  271.     transform: translateX(-26vw) translateY(-47vh) scale(0.39);
  272.   }
  273.   38.8888888889% {
  274.     transform: translateX(45vw) translateY(-5vh) scale(0.56);
  275.   }
  276.   44.4444444444% {
  277.     transform: translateX(-49vw) translateY(24vh) scale(0.98);
  278.   }
  279.   50% {
  280.     transform: translateX(30vw) translateY(24vh) scale(0.72);
  281.   }
  282.   55.5555555556% {
  283.     transform: translateX(-34vw) translateY(39vh) scale(0.78);
  284.   }
  285.   61.1111111111% {
  286.     transform: translateX(-33vw) translateY(12vh) scale(0.66);
  287.   }
  288.   66.6666666667% {
  289.     transform: translateX(18vw) translateY(39vh) scale(0.91);
  290.   }
  291.   72.2222222222% {
  292.     transform: translateX(42vw) translateY(-30vh) scale(0.37);
  293.   }
  294.   77.7777777778% {
  295.     transform: translateX(28vw) translateY(-28vh) scale(0.86);
  296.   }
  297.   83.3333333333% {
  298.     transform: translateX(-7vw) translateY(14vh) scale(0.67);
  299.   }
  300.   88.8888888889% {
  301.     transform: translateX(-2vw) translateY(-42vh) scale(0.64);
  302.   }
  303.   94.4444444444% {
  304.     transform: translateX(-44vw) translateY(-22vh) scale(0.93);
  305.   }
  306.   100% {
  307.     transform: translateX(35vw) translateY(-28vh) scale(0.45);
  308.   }
  309. }
  310. .firefly:nth-child(4) {
  311.   animation-name: move4;
  312. }
  313. .firefly:nth-child(4)::before {
  314.   animation-duration: 17s;
  315. }
  316. .firefly:nth-child(4)::after {
  317.   animation-duration: 17s, 9484ms;
  318.   animation-delay: 0ms, 6352ms;
  319. }
  320.  
  321. @keyframes move4 {
  322.   0% {
  323.     transform: translateX(41vw) translateY(23vh) scale(0.54);
  324.   }
  325.   3.5714285714% {
  326.     transform: translateX(14vw) translateY(-5vh) scale(0.55);
  327.   }
  328.   7.1428571429% {
  329.     transform: translateX(41vw) translateY(-24vh) scale(0.95);
  330.   }
  331.   10.7142857143% {
  332.     transform: translateX(-25vw) translateY(8vh) scale(1);
  333.   }
  334.   14.2857142857% {
  335.     transform: translateX(48vw) translateY(-20vh) scale(0.73);
  336.   }
  337.   17.8571428571% {
  338.     transform: translateX(1vw) translateY(-18vh) scale(0.42);
  339.   }
  340.   21.4285714286% {
  341.     transform: translateX(30vw) translateY(29vh) scale(0.84);
  342.   }
  343.   25% {
  344.     transform: translateX(9vw) translateY(29vh) scale(0.65);
  345.   }
  346.   28.5714285714% {
  347.     transform: translateX(-33vw) translateY(-45vh) scale(0.78);
  348.   }
  349.   32.1428571429% {
  350.     transform: translateX(34vw) translateY(46vh) scale(0.34);
  351.   }
  352.   35.7142857143% {
  353.     transform: translateX(15vw) translateY(45vh) scale(0.49);
  354.   }
  355.   39.2857142857% {
  356.     transform: translateX(50vw) translateY(18vh) scale(0.76);
  357.   }
  358.   42.8571428571% {
  359.     transform: translateX(-39vw) translateY(35vh) scale(0.32);
  360.   }
  361.   46.4285714286% {
  362.     transform: translateX(-6vw) translateY(11vh) scale(0.45);
  363.   }
  364.   50% {
  365.     transform: translateX(-43vw) translateY(-3vh) scale(0.74);
  366.   }
  367.   53.5714285714% {
  368.     transform: translateX(4vw) translateY(-45vh) scale(0.74);
  369.   }
  370.   57.1428571429% {
  371.     transform: translateX(-46vw) translateY(-38vh) scale(0.27);
  372.   }
  373.   60.7142857143% {
  374.     transform: translateX(-8vw) translateY(2vh) scale(0.69);
  375.   }
  376.   64.2857142857% {
  377.     transform: translateX(49vw) translateY(-33vh) scale(0.86);
  378.   }
  379.   67.8571428571% {
  380.     transform: translateX(23vw) translateY(48vh) scale(0.43);
  381.   }
  382.   71.4285714286% {
  383.     transform: translateX(25vw) translateY(42vh) scale(0.32);
  384.   }
  385.   75% {
  386.     transform: translateX(-2vw) translateY(48vh) scale(0.48);
  387.   }
  388.   78.5714285714% {
  389.     transform: translateX(40vw) translateY(20vh) scale(0.37);
  390.   }
  391.   82.1428571429% {
  392.     transform: translateX(-18vw) translateY(-40vh) scale(0.93);
  393.   }
  394.   85.7142857143% {
  395.     transform: translateX(22vw) translateY(-22vh) scale(0.85);
  396.   }
  397.   89.2857142857% {
  398.     transform: translateX(-13vw) translateY(3vh) scale(0.55);
  399.   }
  400.   92.8571428571% {
  401.     transform: translateX(26vw) translateY(-21vh) scale(0.84);
  402.   }
  403.   96.4285714286% {
  404.     transform: translateX(32vw) translateY(-30vh) scale(0.79);
  405.   }
  406.   100% {
  407.     transform: translateX(23vw) translateY(47vh) scale(0.61);
  408.   }
  409. }
  410. .firefly:nth-child(5) {
  411.   animation-name: move5;
  412. }
  413. .firefly:nth-child(5)::before {
  414.   animation-duration: 15s;
  415. }
  416. .firefly:nth-child(5)::after {
  417.   animation-duration: 15s, 6024ms;
  418.   animation-delay: 0ms, 1015ms;
  419. }
  420.  
  421. @keyframes move5 {
  422.   0% {
  423.     transform: translateX(-11vw) translateY(35vh) scale(0.39);
  424.   }
  425.   5.8823529412% {
  426.     transform: translateX(40vw) translateY(24vh) scale(0.73);
  427.   }
  428.   11.7647058824% {
  429.     transform: translateX(1vw) translateY(25vh) scale(0.6);
  430.   }
  431.   17.6470588235% {
  432.     transform: translateX(-14vw) translateY(5vh) scale(0.39);
  433.   }
  434.   23.5294117647% {
  435.     transform: translateX(-41vw) translateY(-29vh) scale(0.82);
  436.   }
  437.   29.4117647059% {
  438.     transform: translateX(38vw) translateY(36vh) scale(0.47);
  439.   }
  440.   35.2941176471% {
  441.     transform: translateX(-27vw) translateY(48vh) scale(0.32);
  442.   }
  443.   41.1764705882% {
  444.     transform: translateX(6vw) translateY(20vh) scale(0.43);
  445.   }
  446.   47.0588235294% {
  447.     transform: translateX(-25vw) translateY(27vh) scale(0.48);
  448.   }
  449.   52.9411764706% {
  450.     transform: translateX(-15vw) translateY(-8vh) scale(0.78);
  451.   }
  452.   58.8235294118% {
  453.     transform: translateX(4vw) translateY(41vh) scale(0.46);
  454.   }
  455.   64.7058823529% {
  456.     transform: translateX(50vw) translateY(20vh) scale(0.7);
  457.   }
  458.   70.5882352941% {
  459.     transform: translateX(-13vw) translateY(7vh) scale(0.5);
  460.   }
  461.   76.4705882353% {
  462.     transform: translateX(29vw) translateY(-15vh) scale(0.89);
  463.   }
  464.   82.3529411765% {
  465.     transform: translateX(-36vw) translateY(29vh) scale(0.46);
  466.   }
  467.   88.2352941176% {
  468.     transform: translateX(-7vw) translateY(24vh) scale(0.82);
  469.   }
  470.   94.1176470588% {
  471.     transform: translateX(-43vw) translateY(46vh) scale(0.34);
  472.   }
  473.   100% {
  474.     transform: translateX(18vw) translateY(46vh) scale(0.67);
  475.   }
  476. }
  477. .firefly:nth-child(6) {
  478.   animation-name: move6;
  479. }
  480. .firefly:nth-child(6)::before {
  481.   animation-duration: 9s;
  482. }
  483. .firefly:nth-child(6)::after {
  484.   animation-duration: 9s, 7072ms;
  485.   animation-delay: 0ms, 6412ms;
  486. }
  487.  
  488. @keyframes move6 {
  489.   0% {
  490.     transform: translateX(-45vw) translateY(3vh) scale(0.66);
  491.   }
  492.   5% {
  493.     transform: translateX(-39vw) translateY(18vh) scale(0.41);
  494.   }
  495.   10% {
  496.     transform: translateX(-37vw) translateY(11vh) scale(0.61);
  497.   }
  498.   15% {
  499.     transform: translateX(19vw) translateY(10vh) scale(0.68);
  500.   }
  501.   20% {
  502.     transform: translateX(-43vw) translateY(-44vh) scale(0.72);
  503.   }
  504.   25% {
  505.     transform: translateX(-13vw) translateY(33vh) scale(0.69);
  506.   }
  507.   30% {
  508.     transform: translateX(-39vw) translateY(-43vh) scale(0.29);
  509.   }
  510.   35% {
  511.     transform: translateX(-48vw) translateY(-43vh) scale(0.55);
  512.   }
  513.   40% {
  514.     transform: translateX(14vw) translateY(34vh) scale(0.47);
  515.   }
  516.   45% {
  517.     transform: translateX(-24vw) translateY(-29vh) scale(0.26);
  518.   }
  519.   50% {
  520.     transform: translateX(-6vw) translateY(12vh) scale(0.52);
  521.   }
  522.   55% {
  523.     transform: translateX(43vw) translateY(32vh) scale(0.35);
  524.   }
  525.   60% {
  526.     transform: translateX(5vw) translateY(39vh) scale(0.43);
  527.   }
  528.   65% {
  529.     transform: translateX(-20vw) translateY(8vh) scale(0.85);
  530.   }
  531.   70% {
  532.     transform: translateX(37vw) translateY(-15vh) scale(0.77);
  533.   }
  534.   75% {
  535.     transform: translateX(-2vw) translateY(-38vh) scale(0.27);
  536.   }
  537.   80% {
  538.     transform: translateX(-45vw) translateY(39vh) scale(0.56);
  539.   }
  540.   85% {
  541.     transform: translateX(7vw) translateY(28vh) scale(0.76);
  542.   }
  543.   90% {
  544.     transform: translateX(42vw) translateY(15vh) scale(1);
  545.   }
  546.   95% {
  547.     transform: translateX(23vw) translateY(-42vh) scale(0.99);
  548.   }
  549.   100% {
  550.     transform: translateX(3vw) translateY(44vh) scale(0.65);
  551.   }
  552. }
  553. .firefly:nth-child(7) {
  554.   animation-name: move7;
  555. }
  556. .firefly:nth-child(7)::before {
  557.   animation-duration: 11s;
  558. }
  559. .firefly:nth-child(7)::after {
  560.   animation-duration: 11s, 8190ms;
  561.   animation-delay: 0ms, 7869ms;
  562. }
  563.  
  564. @keyframes move7 {
  565.   0% {
  566.     transform: translateX(29vw) translateY(12vh) scale(0.81);
  567.   }
  568.   5.8823529412% {
  569.     transform: translateX(48vw) translateY(-42vh) scale(0.67);
  570.   }
  571.   11.7647058824% {
  572.     transform: translateX(-15vw) translateY(1vh) scale(0.58);
  573.   }
  574.   17.6470588235% {
  575.     transform: translateX(2vw) translateY(-26vh) scale(0.71);
  576.   }
  577.   23.5294117647% {
  578.     transform: translateX(26vw) translateY(-29vh) scale(0.47);
  579.   }
  580.   29.4117647059% {
  581.     transform: translateX(29vw) translateY(-45vh) scale(0.67);
  582.   }
  583.   35.2941176471% {
  584.     transform: translateX(21vw) translateY(44vh) scale(0.61);
  585.   }
  586.   41.1764705882% {
  587.     transform: translateX(-9vw) translateY(9vh) scale(0.94);
  588.   }
  589.   47.0588235294% {
  590.     transform: translateX(-39vw) translateY(-17vh) scale(0.59);
  591.   }
  592.   52.9411764706% {
  593.     transform: translateX(-38vw) translateY(1vh) scale(0.66);
  594.   }
  595.   58.8235294118% {
  596.     transform: translateX(-14vw) translateY(-21vh) scale(0.92);
  597.   }
  598.   64.7058823529% {
  599.     transform: translateX(30vw) translateY(3vh) scale(0.9);
  600.   }
  601.   70.5882352941% {
  602.     transform: translateX(43vw) translateY(-31vh) scale(0.72);
  603.   }
  604.   76.4705882353% {
  605.     transform: translateX(-6vw) translateY(27vh) scale(0.28);
  606.   }
  607.   82.3529411765% {
  608.     transform: translateX(-26vw) translateY(-26vh) scale(0.45);
  609.   }
  610.   88.2352941176% {
  611.     transform: translateX(-21vw) translateY(-15vh) scale(0.82);
  612.   }
  613.   94.1176470588% {
  614.     transform: translateX(-18vw) translateY(28vh) scale(0.36);
  615.   }
  616.   100% {
  617.     transform: translateX(47vw) translateY(-42vh) scale(0.91);
  618.   }
  619. }
  620. .firefly:nth-child(8) {
  621.   animation-name: move8;
  622. }
  623. .firefly:nth-child(8)::before {
  624.   animation-duration: 12s;
  625. }
  626. .firefly:nth-child(8)::after {
  627.   animation-duration: 12s, 7616ms;
  628.   animation-delay: 0ms, 4804ms;
  629. }
  630.  
  631. @keyframes move8 {
  632.   0% {
  633.     transform: translateX(24vw) translateY(-6vh) scale(0.3);
  634.   }
  635.   5.2631578947% {
  636.     transform: translateX(-23vw) translateY(-16vh) scale(0.67);
  637.   }
  638.   10.5263157895% {
  639.     transform: translateX(50vw) translateY(-21vh) scale(0.38);
  640.   }
  641.   15.7894736842% {
  642.     transform: translateX(-8vw) translateY(0vh) scale(0.77);
  643.   }
  644.   21.0526315789% {
  645.     transform: translateX(-47vw) translateY(-26vh) scale(0.89);
  646.   }
  647.   26.3157894737% {
  648.     transform: translateX(36vw) translateY(36vh) scale(0.72);
  649.   }
  650.   31.5789473684% {
  651.     transform: translateX(14vw) translateY(-47vh) scale(0.5);
  652.   }
  653.   36.8421052632% {
  654.     transform: translateX(38vw) translateY(-8vh) scale(0.27);
  655.   }
  656.   42.1052631579% {
  657.     transform: translateX(-31vw) translateY(40vh) scale(0.3);
  658.   }
  659.   47.3684210526% {
  660.     transform: translateX(-10vw) translateY(-21vh) scale(0.34);
  661.   }
  662.   52.6315789474% {
  663.     transform: translateX(-17vw) translateY(32vh) scale(0.36);
  664.   }
  665.   57.8947368421% {
  666.     transform: translateX(47vw) translateY(-14vh) scale(0.98);
  667.   }
  668.   63.1578947368% {
  669.     transform: translateX(-28vw) translateY(-7vh) scale(0.79);
  670.   }
  671.   68.4210526316% {
  672.     transform: translateX(9vw) translateY(-45vh) scale(0.63);
  673.   }
  674.   73.6842105263% {
  675.     transform: translateX(-12vw) translateY(-32vh) scale(0.59);
  676.   }
  677.   78.9473684211% {
  678.     transform: translateX(-23vw) translateY(-17vh) scale(0.34);
  679.   }
  680.   84.2105263158% {
  681.     transform: translateX(-6vw) translateY(-6vh) scale(0.34);
  682.   }
  683.   89.4736842105% {
  684.     transform: translateX(-35vw) translateY(42vh) scale(0.38);
  685.   }
  686.   94.7368421053% {
  687.     transform: translateX(29vw) translateY(-42vh) scale(0.89);
  688.   }
  689.   100% {
  690.     transform: translateX(36vw) translateY(-21vh) scale(0.28);
  691.   }
  692. }
  693. .firefly:nth-child(9) {
  694.   animation-name: move9;
  695. }
  696. .firefly:nth-child(9)::before {
  697.   animation-duration: 14s;
  698. }
  699. .firefly:nth-child(9)::after {
  700.   animation-duration: 14s, 9357ms;
  701.   animation-delay: 0ms, 8445ms;
  702. }
  703.  
  704. @keyframes move9 {
  705.   0% {
  706.     transform: translateX(22vw) translateY(15vh) scale(0.77);
  707.   }
  708.   4% {
  709.     transform: translateX(-49vw) translateY(3vh) scale(0.76);
  710.   }
  711.   8% {
  712.     transform: translateX(-48vw) translateY(16vh) scale(0.51);
  713.   }
  714.   12% {
  715.     transform: translateX(-35vw) translateY(-29vh) scale(0.26);
  716.   }
  717.   16% {
  718.     transform: translateX(-21vw) translateY(-15vh) scale(0.79);
  719.   }
  720.   20% {
  721.     transform: translateX(-22vw) translateY(40vh) scale(0.58);
  722.   }
  723.   24% {
  724.     transform: translateX(-30vw) translateY(-24vh) scale(0.89);
  725.   }
  726.   28% {
  727.     transform: translateX(9vw) translateY(19vh) scale(0.79);
  728.   }
  729.   32% {
  730.     transform: translateX(32vw) translateY(35vh) scale(0.84);
  731.   }
  732.   36% {
  733.     transform: translateX(11vw) translateY(-32vh) scale(0.69);
  734.   }
  735.   40% {
  736.     transform: translateX(7vw) translateY(-9vh) scale(0.79);
  737.   }
  738.   44% {
  739.     transform: translateX(-18vw) translateY(-3vh) scale(0.59);
  740.   }
  741.   48% {
  742.     transform: translateX(-15vw) translateY(-13vh) scale(0.6);
  743.   }
  744.   52% {
  745.     transform: translateX(-22vw) translateY(-1vh) scale(1);
  746.   }
  747.   56% {
  748.     transform: translateX(44vw) translateY(47vh) scale(0.29);
  749.   }
  750.   60% {
  751.     transform: translateX(-9vw) translateY(35vh) scale(0.89);
  752.   }
  753.   64% {
  754.     transform: translateX(38vw) translateY(-18vh) scale(0.99);
  755.   }
  756.   68% {
  757.     transform: translateX(8vw) translateY(35vh) scale(0.95);
  758.   }
  759.   72% {
  760.     transform: translateX(20vw) translateY(15vh) scale(0.92);
  761.   }
  762.   76% {
  763.     transform: translateX(12vw) translateY(28vh) scale(0.74);
  764.   }
  765.   80% {
  766.     transform: translateX(0vw) translateY(-34vh) scale(0.54);
  767.   }
  768.   84% {
  769.     transform: translateX(29vw) translateY(-40vh) scale(0.35);
  770.   }
  771.   88% {
  772.     transform: translateX(34vw) translateY(15vh) scale(0.35);
  773.   }
  774.   92% {
  775.     transform: translateX(22vw) translateY(-38vh) scale(0.27);
  776.   }
  777.   96% {
  778.     transform: translateX(-13vw) translateY(27vh) scale(0.53);
  779.   }
  780.   100% {
  781.     transform: translateX(-18vw) translateY(4vh) scale(0.85);
  782.   }
  783. }
  784. .firefly:nth-child(10) {
  785.   animation-name: move10;
  786. }
  787. .firefly:nth-child(10)::before {
  788.   animation-duration: 16s;
  789. }
  790. .firefly:nth-child(10)::after {
  791.   animation-duration: 16s, 9281ms;
  792.   animation-delay: 0ms, 820ms;
  793. }
  794.  
  795. @keyframes move10 {
  796.   0% {
  797.     transform: translateX(29vw) translateY(-14vh) scale(0.36);
  798.   }
  799.   4.1666666667% {
  800.     transform: translateX(-37vw) translateY(10vh) scale(0.89);
  801.   }
  802.   8.3333333333% {
  803.     transform: translateX(47vw) translateY(43vh) scale(0.41);
  804.   }
  805.   12.5% {
  806.     transform: translateX(3vw) translateY(34vh) scale(0.62);
  807.   }
  808.   16.6666666667% {
  809.     transform: translateX(-4vw) translateY(-23vh) scale(0.59);
  810.   }
  811.   20.8333333333% {
  812.     transform: translateX(-45vw) translateY(7vh) scale(0.35);
  813.   }
  814.   25% {
  815.     transform: translateX(-33vw) translateY(-2vh) scale(0.8);
  816.   }
  817.   29.1666666667% {
  818.     transform: translateX(8vw) translateY(2vh) scale(0.33);
  819.   }
  820.   33.3333333333% {
  821.     transform: translateX(-35vw) translateY(-7vh) scale(0.66);
  822.   }
  823.   37.5% {
  824.     transform: translateX(-49vw) translateY(-31vh) scale(0.9);
  825.   }
  826.   41.6666666667% {
  827.     transform: translateX(28vw) translateY(-21vh) scale(0.4);
  828.   }
  829.   45.8333333333% {
  830.     transform: translateX(4vw) translateY(2vh) scale(0.34);
  831.   }
  832.   50% {
  833.     transform: translateX(8vw) translateY(9vh) scale(0.31);
  834.   }
  835.   54.1666666667% {
  836.     transform: translateX(-19vw) translateY(38vh) scale(0.81);
  837.   }
  838.   58.3333333333% {
  839.     transform: translateX(-48vw) translateY(42vh) scale(0.47);
  840.   }
  841.   62.5% {
  842.     transform: translateX(-23vw) translateY(5vh) scale(0.92);
  843.   }
  844.   66.6666666667% {
  845.     transform: translateX(-14vw) translateY(-12vh) scale(0.99);
  846.   }
  847.   70.8333333333% {
  848.     transform: translateX(8vw) translateY(-47vh) scale(0.92);
  849.   }
  850.   75% {
  851.     transform: translateX(-19vw) translateY(-39vh) scale(0.86);
  852.   }
  853.   79.1666666667% {
  854.     transform: translateX(30vw) translateY(-23vh) scale(0.4);
  855.   }
  856.   83.3333333333% {
  857.     transform: translateX(6vw) translateY(4vh) scale(0.73);
  858.   }
  859.   87.5% {
  860.     transform: translateX(-1vw) translateY(12vh) scale(0.6);
  861.   }
  862.   91.6666666667% {
  863.     transform: translateX(18vw) translateY(-24vh) scale(0.29);
  864.   }
  865.   95.8333333333% {
  866.     transform: translateX(-29vw) translateY(-7vh) scale(0.52);
  867.   }
  868.   100% {
  869.     transform: translateX(15vw) translateY(6vh) scale(0.44);
  870.   }
  871. }
  872. .firefly:nth-child(11) {
  873.   animation-name: move11;
  874. }
  875. .firefly:nth-child(11)::before {
  876.   animation-duration: 13s;
  877. }
  878. .firefly:nth-child(11)::after {
  879.   animation-duration: 13s, 7352ms;
  880.   animation-delay: 0ms, 6206ms;
  881. }
  882.  
  883. @keyframes move11 {
  884.   0% {
  885.     transform: translateX(-45vw) translateY(43vh) scale(0.85);
  886.   }
  887.   5.5555555556% {
  888.     transform: translateX(-26vw) translateY(-18vh) scale(0.43);
  889.   }
  890.   11.1111111111% {
  891.     transform: translateX(-8vw) translateY(40vh) scale(0.34);
  892.   }
  893.   16.6666666667% {
  894.     transform: translateX(28vw) translateY(-16vh) scale(0.74);
  895.   }
  896.   22.2222222222% {
  897.     transform: translateX(-6vw) translateY(-45vh) scale(0.48);
  898.   }
  899.   27.7777777778% {
  900.     transform: translateX(29vw) translateY(37vh) scale(0.27);
  901.   }
  902.   33.3333333333% {
  903.     transform: translateX(33vw) translateY(46vh) scale(0.49);
  904.   }
  905.   38.8888888889% {
  906.     transform: translateX(35vw) translateY(-10vh) scale(0.78);
  907.   }
  908.   44.4444444444% {
  909.     transform: translateX(-37vw) translateY(-28vh) scale(0.73);
  910.   }
  911.   50% {
  912.     transform: translateX(-24vw) translateY(-45vh) scale(0.45);
  913.   }
  914.   55.5555555556% {
  915.     transform: translateX(42vw) translateY(19vh) scale(0.72);
  916.   }
  917.   61.1111111111% {
  918.     transform: translateX(-44vw) translateY(22vh) scale(0.47);
  919.   }
  920.   66.6666666667% {
  921.     transform: translateX(-15vw) translateY(-12vh) scale(0.85);
  922.   }
  923.   72.2222222222% {
  924.     transform: translateX(-18vw) translateY(-13vh) scale(0.69);
  925.   }
  926.   77.7777777778% {
  927.     transform: translateX(9vw) translateY(-48vh) scale(0.96);
  928.   }
  929.   83.3333333333% {
  930.     transform: translateX(-4vw) translateY(-18vh) scale(0.82);
  931.   }
  932.   88.8888888889% {
  933.     transform: translateX(22vw) translateY(34vh) scale(0.36);
  934.   }
  935.   94.4444444444% {
  936.     transform: translateX(-22vw) translateY(-42vh) scale(0.69);
  937.   }
  938.   100% {
  939.     transform: translateX(-48vw) translateY(7vh) scale(0.58);
  940.   }
  941. }
  942. .firefly:nth-child(12) {
  943.   animation-name: move12;
  944. }
  945. .firefly:nth-child(12)::before {
  946.   animation-duration: 16s;
  947. }
  948. .firefly:nth-child(12)::after {
  949.   animation-duration: 16s, 8698ms;
  950.   animation-delay: 0ms, 2658ms;
  951. }
  952.  
  953. @keyframes move12 {
  954.   0% {
  955.     transform: translateX(44vw) translateY(17vh) scale(0.51);
  956.   }
  957.   3.5714285714% {
  958.     transform: translateX(1vw) translateY(6vh) scale(0.41);
  959.   }
  960.   7.1428571429% {
  961.     transform: translateX(49vw) translateY(12vh) scale(0.53);
  962.   }
  963.   10.7142857143% {
  964.     transform: translateX(34vw) translateY(18vh) scale(0.97);
  965.   }
  966.   14.2857142857% {
  967.     transform: translateX(-39vw) translateY(-13vh) scale(0.65);
  968.   }
  969.   17.8571428571% {
  970.     transform: translateX(-3vw) translateY(-16vh) scale(0.69);
  971.   }
  972.   21.4285714286% {
  973.     transform: translateX(48vw) translateY(-18vh) scale(0.89);
  974.   }
  975.   25% {
  976.     transform: translateX(-9vw) translateY(-11vh) scale(0.46);
  977.   }
  978.   28.5714285714% {
  979.     transform: translateX(12vw) translateY(-48vh) scale(0.91);
  980.   }
  981.   32.1428571429% {
  982.     transform: translateX(38vw) translateY(29vh) scale(0.88);
  983.   }
  984.   35.7142857143% {
  985.     transform: translateX(-46vw) translateY(-13vh) scale(0.65);
  986.   }
  987.   39.2857142857% {
  988.     transform: translateX(39vw) translateY(42vh) scale(0.5);
  989.   }
  990.   42.8571428571% {
  991.     transform: translateX(26vw) translateY(-24vh) scale(0.39);
  992.   }
  993.   46.4285714286% {
  994.     transform: translateX(45vw) translateY(-12vh) scale(0.29);
  995.   }
  996.   50% {
  997.     transform: translateX(28vw) translateY(26vh) scale(0.37);
  998.   }
  999.   53.5714285714% {
  1000.     transform: translateX(30vw) translateY(-32vh) scale(0.7);
  1001.   }
  1002.   57.1428571429% {
  1003.     transform: translateX(-32vw) translateY(8vh) scale(0.88);
  1004.   }
  1005.   60.7142857143% {
  1006.     transform: translateX(11vw) translateY(-19vh) scale(0.41);
  1007.   }
  1008.   64.2857142857% {
  1009.     transform: translateX(3vw) translateY(-25vh) scale(0.29);
  1010.   }
  1011.   67.8571428571% {
  1012.     transform: translateX(-35vw) translateY(9vh) scale(0.94);
  1013.   }
  1014.   71.4285714286% {
  1015.     transform: translateX(21vw) translateY(-48vh) scale(0.27);
  1016.   }
  1017.   75% {
  1018.     transform: translateX(-31vw) translateY(-48vh) scale(0.75);
  1019.   }
  1020.   78.5714285714% {
  1021.     transform: translateX(33vw) translateY(-20vh) scale(0.98);
  1022.   }
  1023.   82.1428571429% {
  1024.     transform: translateX(-4vw) translateY(27vh) scale(0.27);
  1025.   }
  1026.   85.7142857143% {
  1027.     transform: translateX(-49vw) translateY(-34vh) scale(0.7);
  1028.   }
  1029.   89.2857142857% {
  1030.     transform: translateX(-38vw) translateY(-1vh) scale(0.31);
  1031.   }
  1032.   92.8571428571% {
  1033.     transform: translateX(2vw) translateY(-13vh) scale(0.47);
  1034.   }
  1035.   96.4285714286% {
  1036.     transform: translateX(21vw) translateY(2vh) scale(0.51);
  1037.   }
  1038.   100% {
  1039.     transform: translateX(31vw) translateY(-3vh) scale(0.53);
  1040.   }
  1041. }
  1042. .firefly:nth-child(13) {
  1043.   animation-name: move13;
  1044. }
  1045. .firefly:nth-child(13)::before {
  1046.   animation-duration: 11s;
  1047. }
  1048. .firefly:nth-child(13)::after {
  1049.   animation-duration: 11s, 9638ms;
  1050.   animation-delay: 0ms, 1928ms;
  1051. }
  1052.  
  1053. @keyframes move13 {
  1054.   0% {
  1055.     transform: translateX(22vw) translateY(23vh) scale(0.43);
  1056.   }
  1057.   4.5454545455% {
  1058.     transform: translateX(44vw) translateY(30vh) scale(0.77);
  1059.   }
  1060.   9.0909090909% {
  1061.     transform: translateX(29vw) translateY(14vh) scale(0.83);
  1062.   }
  1063.   13.6363636364% {
  1064.     transform: translateX(47vw) translateY(-35vh) scale(0.56);
  1065.   }
  1066.   18.1818181818% {
  1067.     transform: translateX(30vw) translateY(10vh) scale(0.93);
  1068.   }
  1069.   22.7272727273% {
  1070.     transform: translateX(7vw) translateY(-9vh) scale(0.7);
  1071.   }
  1072.   27.2727272727% {
  1073.     transform: translateX(-43vw) translateY(37vh) scale(0.78);
  1074.   }
  1075.   31.8181818182% {
  1076.     transform: translateX(-34vw) translateY(5vh) scale(0.54);
  1077.   }
  1078.   36.3636363636% {
  1079.     transform: translateX(-20vw) translateY(24vh) scale(0.93);
  1080.   }
  1081.   40.9090909091% {
  1082.     transform: translateX(6vw) translateY(-45vh) scale(0.73);
  1083.   }
  1084.   45.4545454545% {
  1085.     transform: translateX(11vw) translateY(-47vh) scale(0.58);
  1086.   }
  1087.   50% {
  1088.     transform: translateX(28vw) translateY(-42vh) scale(0.95);
  1089.   }
  1090.   54.5454545455% {
  1091.     transform: translateX(-48vw) translateY(-8vh) scale(0.38);
  1092.   }
  1093.   59.0909090909% {
  1094.     transform: translateX(-7vw) translateY(16vh) scale(0.41);
  1095.   }
  1096.   63.6363636364% {
  1097.     transform: translateX(-20vw) translateY(-8vh) scale(0.8);
  1098.   }
  1099.   68.1818181818% {
  1100.     transform: translateX(-36vw) translateY(-10vh) scale(0.92);
  1101.   }
  1102.   72.7272727273% {
  1103.     transform: translateX(40vw) translateY(31vh) scale(0.71);
  1104.   }
  1105.   77.2727272727% {
  1106.     transform: translateX(-13vw) translateY(5vh) scale(0.61);
  1107.   }
  1108.   81.8181818182% {
  1109.     transform: translateX(-10vw) translateY(2vh) scale(0.88);
  1110.   }
  1111.   86.3636363636% {
  1112.     transform: translateX(9vw) translateY(-21vh) scale(0.9);
  1113.   }
  1114.   90.9090909091% {
  1115.     transform: translateX(12vw) translateY(41vh) scale(0.83);
  1116.   }
  1117.   95.4545454545% {
  1118.     transform: translateX(6vw) translateY(47vh) scale(0.42);
  1119.   }
  1120.   100% {
  1121.     transform: translateX(15vw) translateY(25vh) scale(0.52);
  1122.   }
  1123. }
  1124. .firefly:nth-child(14) {
  1125.   animation-name: move14;
  1126. }
  1127. .firefly:nth-child(14)::before {
  1128.   animation-duration: 16s;
  1129. }
  1130. .firefly:nth-child(14)::after {
  1131.   animation-duration: 16s, 9552ms;
  1132.   animation-delay: 0ms, 8281ms;
  1133. }
  1134.  
  1135. @keyframes move14 {
  1136.   0% {
  1137.     transform: translateX(15vw) translateY(-28vh) scale(0.81);
  1138.   }
  1139.   5.2631578947% {
  1140.     transform: translateX(49vw) translateY(46vh) scale(0.81);
  1141.   }
  1142.   10.5263157895% {
  1143.     transform: translateX(32vw) translateY(41vh) scale(0.37);
  1144.   }
  1145.   15.7894736842% {
  1146.     transform: translateX(30vw) translateY(35vh) scale(0.96);
  1147.   }
  1148.   21.0526315789% {
  1149.     transform: translateX(-28vw) translateY(26vh) scale(0.6);
  1150.   }
  1151.   26.3157894737% {
  1152.     transform: translateX(-39vw) translateY(-14vh) scale(0.98);
  1153.   }
  1154.   31.5789473684% {
  1155.     transform: translateX(-48vw) translateY(-11vh) scale(0.92);
  1156.   }
  1157.   36.8421052632% {
  1158.     transform: translateX(-16vw) translateY(-45vh) scale(0.47);
  1159.   }
  1160.   42.1052631579% {
  1161.     transform: translateX(-3vw) translateY(-14vh) scale(0.65);
  1162.   }
  1163.   47.3684210526% {
  1164.     transform: translateX(-28vw) translateY(7vh) scale(0.97);
  1165.   }
  1166.   52.6315789474% {
  1167.     transform: translateX(16vw) translateY(-10vh) scale(0.67);
  1168.   }
  1169.   57.8947368421% {
  1170.     transform: translateX(26vw) translateY(32vh) scale(0.58);
  1171.   }
  1172.   63.1578947368% {
  1173.     transform: translateX(34vw) translateY(37vh) scale(0.32);
  1174.   }
  1175.   68.4210526316% {
  1176.     transform: translateX(15vw) translateY(5vh) scale(0.34);
  1177.   }
  1178.   73.6842105263% {
  1179.     transform: translateX(-24vw) translateY(35vh) scale(0.63);
  1180.   }
  1181.   78.9473684211% {
  1182.     transform: translateX(-32vw) translateY(46vh) scale(0.32);
  1183.   }
  1184.   84.2105263158% {
  1185.     transform: translateX(-17vw) translateY(-9vh) scale(0.5);
  1186.   }
  1187.   89.4736842105% {
  1188.     transform: translateX(-24vw) translateY(3vh) scale(0.59);
  1189.   }
  1190.   94.7368421053% {
  1191.     transform: translateX(21vw) translateY(35vh) scale(0.79);
  1192.   }
  1193.   100% {
  1194.     transform: translateX(-49vw) translateY(-9vh) scale(0.52);
  1195.   }
  1196. }
  1197. .firefly:nth-child(15) {
  1198.   animation-name: move15;
  1199. }
  1200. .firefly:nth-child(15)::before {
  1201.   animation-duration: 17s;
  1202. }
  1203. .firefly:nth-child(15)::after {
  1204.   animation-duration: 17s, 6277ms;
  1205.   animation-delay: 0ms, 8444ms;
  1206. }
  1207.  
  1208. @keyframes move15 {
  1209.   0% {
  1210.     transform: translateX(-7vw) translateY(-24vh) scale(0.77);
  1211.   }
  1212.   4.347826087% {
  1213.     transform: translateX(-14vw) translateY(23vh) scale(0.54);
  1214.   }
  1215.   8.6956521739% {
  1216.     transform: translateX(-8vw) translateY(-21vh) scale(0.27);
  1217.   }
  1218.   13.0434782609% {
  1219.     transform: translateX(43vw) translateY(-14vh) scale(0.85);
  1220.   }
  1221.   17.3913043478% {
  1222.     transform: translateX(-34vw) translateY(-33vh) scale(0.33);
  1223.   }
  1224.   21.7391304348% {
  1225.     transform: translateX(-33vw) translateY(-41vh) scale(0.84);
  1226.   }
  1227.   26.0869565217% {
  1228.     transform: translateX(46vw) translateY(-17vh) scale(0.63);
  1229.   }
  1230.   30.4347826087% {
  1231.     transform: translateX(-18vw) translateY(27vh) scale(0.6);
  1232.   }
  1233.   34.7826086957% {
  1234.     transform: translateX(-16vw) translateY(-49vh) scale(0.59);
  1235.   }
  1236.   39.1304347826% {
  1237.     transform: translateX(-38vw) translateY(-21vh) scale(0.77);
  1238.   }
  1239.   43.4782608696% {
  1240.     transform: translateX(-28vw) translateY(37vh) scale(0.8);
  1241.   }
  1242.   47.8260869565% {
  1243.     transform: translateX(-3vw) translateY(-23vh) scale(0.77);
  1244.   }
  1245.   52.1739130435% {
  1246.     transform: translateX(-18vw) translateY(-35vh) scale(0.5);
  1247.   }
  1248.   56.5217391304% {
  1249.     transform: translateX(-17vw) translateY(-17vh) scale(0.7);
  1250.   }
  1251.   60.8695652174% {
  1252.     transform: translateX(17vw) translateY(-45vh) scale(0.31);
  1253.   }
  1254.   65.2173913043% {
  1255.     transform: translateX(-21vw) translateY(32vh) scale(0.84);
  1256.   }
  1257.   69.5652173913% {
  1258.     transform: translateX(32vw) translateY(30vh) scale(0.56);
  1259.   }
  1260.   73.9130434783% {
  1261.     transform: translateX(-13vw) translateY(6vh) scale(0.89);
  1262.   }
  1263.   78.2608695652% {
  1264.     transform: translateX(17vw) translateY(39vh) scale(0.53);
  1265.   }
  1266.   82.6086956522% {
  1267.     transform: translateX(-12vw) translateY(23vh) scale(0.9);
  1268.   }
  1269.   86.9565217391% {
  1270.     transform: translateX(-40vw) translateY(22vh) scale(0.94);
  1271.   }
  1272.   91.3043478261% {
  1273.     transform: translateX(-5vw) translateY(-37vh) scale(0.91);
  1274.   }
  1275.   95.652173913% {
  1276.     transform: translateX(42vw) translateY(21vh) scale(0.37);
  1277.   }
  1278.   100% {
  1279.     transform: translateX(18vw) translateY(48vh) scale(0.99);
  1280.   }
  1281. }
  1282. @keyframes drift {
  1283.   0% {
  1284.     transform: rotate(0deg);
  1285.   }
  1286.   100% {
  1287.     transform: rotate(360deg);
  1288.   }
  1289. }
  1290. @keyframes flash {
  1291.   0%, 30%, 100% {
  1292.     opacity: 0;
  1293.     box-shadow: 0 0 0vw 0vw yellow;
  1294.   }
  1295.   5% {
  1296.     opacity: 1;
  1297.     box-shadow: 0 0 2vw 0.4vw yellow;
  1298.   }
  1299. }
  1300.  
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!