纯css实现多个烟花绽放动画效果
代码语言:html
所属分类:动画
代码描述:纯css实现多个烟花绽放动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); height: 100vh; overflow: hidden; display: -webkit-box; display: flex; font-family: 'Anton', sans-serif; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; -webkit-perspective: 600px; perspective: 600px; } div { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .camera.-y { -webkit-animation: rotate 30s linear infinite; animation: rotate 30s linear infinite; } .fireworks:nth-child(1) { -webkit-transform: translate3d(0, -200px, 100px); transform: translate3d(0, -200px, 100px); --color: rgb(250, 40, 40); } .fireworks:nth-child(2) { -webkit-transform: translate3d(160px, -100px, -160px); transform: translate3d(160px, -100px, -160px); --color: rgb(50, 240, 40); } .fireworks:nth-child(2) .line .spark { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .fireworks:nth-child(3) { -webkit-transform: translate3d(-160px, 0, -160px); transform: translate3d(-160px, 0, -160px); --color: rgb(50, 80, 250); } .fireworks:nth-child(3) .line .spark { -webkit-animation-delay: -1s; animation-delay: -1s; } .spark { position: absolute; -webkit-transform-origin: 0 0; transform-origin: 0 0; } .fire { position: absolute; left: -3px; width: 5px; height: 5px; background: #fa2828; } .fire::before { content: ''; position: absolute; width: 100%; height: 100%; background: #e6c828; -webkit-transform: translateZ(0.1px); transform: translateZ(0.1px); } .line:nth-child(1) { -webkit-transform: rotateY(190deg); transform: rotateY(190deg); } .line:nth-child(1) .spark { -webkit-animation: spark1 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark1 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(1) .fire { -webkit-animation: fire 1694ms -873ms linear infinite; animation: fire 1694ms -873ms linear infinite; } @-webkit-keyframes spark1 { 0% { -webkit-transform: translateY(510px); transform: translateY(510px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(355deg) translateX(180px); transform: rotateZ(355deg) translateX(180px); } } @keyframes spark1 { 0% { -webkit-transform: translateY(510px); transform: translateY(510px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(355deg) translateX(180px); transform: rotateZ(355deg) translateX(180px); } } .line:nth-child(2) { -webkit-transform: rotateY(1deg); transform: rotateY(1deg); } .line:nth-child(2) .spark { -webkit-animation: spark2 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark2 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(2) .fire { -webkit-animation: fire 1110ms -284ms linear infinite; animation: fire 1110ms -284ms linear infinite; } @-webkit-keyframes spark2 { 0% { -webkit-transform: translateY(551px); transform: translateY(551px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(190deg) translateX(271px); transform: rotateZ(190deg) translateX(271px); } } @keyframes spark2 { 0% { -webkit-transform: translateY(551px); transform: translateY(551px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(190deg) translateX(271px); transform: rotateZ(190deg) translateX(271px); } } .line:nth-child(3) { -webkit-transform: rotateY(107deg); transform: rotateY(107deg); } .line:nth-child(3) .spark { -webkit-animation: spark3 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark3 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(3) .fire { -webkit-animation: fire 1221ms -791ms linear infinite; animation: fire 1221ms -791ms linear infinite; } @-webkit-keyframes spark3 { 0% { -webkit-transform: translateY(638px); transform: translateY(638px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(24deg) translateX(171px); transform: rotateZ(24deg) translateX(171px); } } @keyframes spark3 { 0% { -webkit-transform: translateY(638px); transform: translateY(638px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(24deg) translateX(171px); transform: rotateZ(24deg) translateX(171px); } } .line:nth-child(4) { -webkit-transform: rotateY(72deg); transform: rotateY(72deg); } .line:nth-child(4) .spark { -webkit-animation: spark4 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark4 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(4) .fire { -webkit-animation: fire 1925ms -9ms linear infinite; animation: fire 1925ms -9ms linear infinite; } @-webkit-keyframes spark4 { 0% { -webkit-transform: translateY(650px); transform: translateY(650px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(136deg) translateX(166px); transform: rotateZ(136deg) translateX(166px); } } @keyframes spark4 { 0% { -webkit-transform: translateY(650px); transform: translateY(650px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(136deg) translateX(166px); transform: rotateZ(136deg) translateX(166px); } } .line:nth-child(5) { -webkit-transform: rotateY(319deg); transform: rotateY(319deg); } .line:nth-child(5) .spark { -webkit-animation: spark5 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark5 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(5) .fire { -webkit-animation: fire 1699ms -132ms linear infinite; animation: fire 1699ms -132ms linear infinite; } @-webkit-keyframes spark5 { 0% { -webkit-transform: translateY(580px); transform: translateY(580px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(141deg) translateX(111px); transform: rotateZ(141deg) translateX(111px); } } @keyframes spark5 { 0% { -webkit-transform: translateY(580px); transform: translateY(580px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(141deg) translateX(111px); transform: rotateZ(141deg) translateX(111px); } } .line:nth-child(6) { -webkit-transform: rotateY(25deg); transform: rotateY(25deg); } .line:nth-child(6) .spark { -webkit-animation: spark6 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark6 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(6) .fire { -webkit-animation: fire 1416ms -145ms linear infinite; animation: fire 1416ms -145ms linear infinite; } @-webkit-keyframes spark6 { 0% { -webkit-transform: translateY(580px); transform: translateY(580px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(110deg) translateX(174px); transform: rotateZ(110deg) translateX(174px); } } @keyframes spark6 { 0% { -webkit-transform: translateY(580px); transform: translateY(580px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(110deg) translateX(174px); transform: rotateZ(110deg) translateX(174px); } } .line:nth-child(7) { -webkit-transform: rotateY(228deg); transform: rotateY(228deg); } .line:nth-child(7) .spark { -webkit-animation: spark7 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark7 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(7) .fire { -webkit-animation: fire 1830ms -74ms linear infinite; animation: fire 1830ms -74ms linear infinite; } @-webkit-keyframes spark7 { 0% { -webkit-transform: translateY(624px); transform: translateY(624px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(149deg) translateX(281px); transform: rotateZ(149deg) translateX(281px); } } @keyframes spark7 { 0% { -webkit-transform: translateY(624px); transform: translateY(624px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(149deg) translateX(281px); transform: rotateZ(149deg) translateX(281px); } } .line:nth-child(8) { -webkit-transform: rotateY(285deg); transform: rotateY(285deg); } .line:nth-child(8) .spark { -webkit-animation: spark8 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark8 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(8) .fire { -webkit-animation: fire 1714ms -435ms linear infinite; animation: fire 1714ms -435ms linear infinite; } @-webkit-keyframes spark8 { 0% { -webkit-transform: translateY(526px); transform: translateY(526px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(160deg) translateX(282px); transform: rotateZ(160deg) translateX(282px); } } @keyframes spark8 { 0% { -webkit-transform: translateY(526px); transform: translateY(526px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(160deg) translateX(282px); transform: rotateZ(160deg) translateX(282px); } } .line:nth-child(9) { -webkit-transform: rotateY(325deg); transform: rotateY(325deg); } .line:nth-child(9) .spark { -webkit-animation: spark9 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark9 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(9) .fire { -webkit-animation: fire 1800ms -572ms linear infinite; animation: fire 1800ms -572ms linear infinite; } @-webkit-keyframes spark9 { 0% { -webkit-transform: translateY(546px); transform: translateY(546px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(357deg) translateX(190px); transform: rotateZ(357deg) translateX(190px); } } @keyframes spark9 { 0% { -webkit-transform: translateY(546px); transform: translateY(546px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(357deg) translateX(190px); transform: rotateZ(357deg) translateX(190px); } } .line:nth-child(10) { -webkit-transform: rotateY(12deg); transform: rotateY(12deg); } .line:nth-child(10) .spark { -webkit-animation: spark10 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark10 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(10) .fire { -webkit-animation: fire 1785ms -362ms linear infinite; animation: fire 1785ms -362ms linear infinite; } @-webkit-keyframes spark10 { 0% { -webkit-transform: translateY(540px); transform: translateY(540px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(346deg) translateX(138px); transform: rotateZ(346deg) translateX(138px); } } @keyframes spark10 { 0% { -webkit-transform: translateY(540px); transform: translateY(540px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(346deg) translateX(138px); transform: rotateZ(346deg) translateX(138px); } } .line:nth-child(11) { -webkit-transform: rotateY(1deg); transform: rotateY(1deg); } .line:nth-child(11) .spark { -webkit-animation: spark11 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark11 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(11) .fire { -webkit-animation: fire 1011ms -531ms linear infinite; animation: fire 1011ms -531ms linear infinite; } @-webkit-keyframes spark11 { 0% { -webkit-transform: translateY(540px); transform: translateY(540px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(8deg) translateX(128px); transform: rotateZ(8deg) translateX(128px); } } @keyframes spark11 { 0% { -webkit-transform: translateY(540px); transform: translateY(540px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(8deg) translateX(128px); transform: rotateZ(8deg) translateX(128px); } } .line:nth-child(12) { -webkit-transform: rotateY(114deg); transform: rotateY(114deg); } .line:nth-child(12) .spark { -webkit-animation: spark12 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark12 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(12) .fire { -webkit-animation: fire 1671ms -994ms linear infinite; animation: fire 1671ms -994ms linear infinite; } @-webkit-keyframes spark12 { 0% { -webkit-transform: translateY(640px); transform: translateY(640px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(302deg) translateX(286px); transform: rotateZ(302deg) translateX(286px); } } @keyframes spark12 { 0% { -webkit-transform: translateY(640px); transform: translateY(640px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(302deg) translateX(286px); transform: rotateZ(302deg) translateX(286px); } } .line:nth-child(13) { -webkit-transform: rotateY(310deg); transform: rotateY(310deg); } .line:nth-child(13) .spark { -webkit-animation: spark13 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark13 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(13) .fire { -webkit-animation: fire 1853ms -371ms linear infinite; animation: fire 1853ms -371ms linear infinite; } @-webkit-keyframes spark13 { 0% { -webkit-transform: translateY(563px); transform: translateY(563px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(53deg) translateX(250px); transform: rotateZ(53deg) translateX(250px); } } @keyframes spark13 { 0% { -webkit-transform: translateY(563px); transform: translateY(563px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(53deg) translateX(250px); transform: rotateZ(53deg) translateX(250px); } } .line:nth-child(14) { -webkit-transform: rotateY(290deg); transform: rotateY(290deg); } .line:nth-child(14) .spark { -webkit-animation: spark14 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark14 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(14) .fire { -webkit-animation: fire 1476ms -917ms linear infinite; animation: fire 1476ms -917ms linear infinite; } @-webkit-keyframes spark14 { 0% { -webkit-transform: translateY(625px); transform: translateY(625px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(34deg) translateX(200px); transform: rotateZ(34deg) translateX(200px); } } @keyframes spark14 { 0% { -webkit-transform: translateY(625px); transform: translateY(625px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(34deg) translateX(200px); transform: rotateZ(34deg) translateX(200px); } } .line:nth-child(15) { -webkit-transform: rotateY(145deg); transform: rotateY(145deg); } .line:nth-child(15) .spark { -webkit-animation: spark15 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark15 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(15) .fire { -webkit-animation: fire 1244ms -765ms linear infinite; animation: fire 1244ms -765ms linear infinite; } @-webkit-keyframes spark15 { 0% { -webkit-transform: translateY(639px); transform: translateY(639px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(352deg) translateX(292px); transform: rotateZ(352deg) translateX(292px); } } @keyframes spark15 { 0% { -webkit-transform: translateY(639px); transform: translateY(639px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(352deg) translateX(292px); transform: rotateZ(352deg) translateX(292px); } } .line:nth-child(16) { -webkit-transform: rotateY(158deg); transform: rotateY(158deg); } .line:nth-child(16) .spark { -webkit-animation: spark16 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark16 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(16) .fire { -webkit-animation: fire 1851ms -590ms linear infinite; animation: fire 1851ms -590ms linear infinite; } @-webkit-keyframes spark16 { 0% { -webkit-transform: translateY(531px); transform: translateY(531px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(310deg) translateX(113px); transform: rotateZ(310deg) translateX(113px); } } @keyframes spark16 { 0% { -webkit-transform: translateY(531px); transform: translateY(531px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(310deg) translateX(113px); transform: rotateZ(310deg) translateX(113px); } } .line:nth-child(17) { -webkit-transform: rotateY(211deg); transform: rotateY(211deg); } .line:nth-child(17) .spark { -webkit-animation: spark17 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark17 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(17) .fire { -webkit-animation: fire 1466ms -473ms linear infinite; animation: fire 1466ms -473ms linear infinite; } @-webkit-keyframes spark17 { 0% { -webkit-transform: translateY(502px); transform: translateY(502px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(138deg) translateX(214px); transform: rotateZ(138deg) translateX(214px); } } @keyframes spark17 { 0% { -webkit-transform: translateY(502px); transform: translateY(502px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(138deg) translateX(214px); transform: rotateZ(138deg) translateX(214px); } } .line:nth-child(18) { -webkit-transform: rotateY(351deg); transform: rotateY(351deg); } .line:nth-child(18) .spark { -webkit-animation: spark18 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark18 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(18) .fire { -webkit-animation: fire 1801ms -50ms linear infinite; animation: fire 1801ms -50ms linear infinite; } @-webkit-keyframes spark18 { 0% { -webkit-transform: translateY(551px); transform: translateY(551px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(225deg) translateX(161px); transform: rotateZ(225deg) translateX(161px); } } @keyframes spark18 { 0% { -webkit-transform: translateY(551px); transform: translateY(551px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(225deg) translateX(161px); transform: rotateZ(225deg) translateX(161px); } } .line:nth-child(19) { -webkit-transform: rotateY(228deg); transform: rotateY(228deg); } .line:nth-child(19) .spark { -webkit-animation: spark19 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark19 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(19) .fire { -webkit-animation: fire 1362ms -991ms linear infinite; animation: fire 1362ms -991ms linear infinite; } @-webkit-keyframes spark19 { 0% { -webkit-transform: translateY(586px); transform: translateY(586px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(168deg) translateX(114px); transform: rotateZ(168deg) translateX(114px); } } @keyframes spark19 { 0% { -webkit-transform: translateY(586px); transform: translateY(586px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(168deg) translateX(114px); transform: rotateZ(168deg) translateX(114px); } } .line:nth-child(20) { -webkit-transform: rotateY(58deg); transform: rotateY(58deg); } .line:nth-child(20) .spark { -webkit-animation: spark20 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark20 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(20) .fire { -webkit-animation: fire 1364ms -636ms linear infinite; animation: fire 1364ms -636ms linear infinite; } @-webkit-keyframes spark20 { 0% { -webkit-transform: translateY(538px); transform: translateY(538px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(97deg) translateX(231px); transform: rotateZ(97deg) translateX(231px); } } @keyframes spark20 { 0% { -webkit-transform: translateY(538px); transform: translateY(538px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(97deg) translateX(231px); transform: rotateZ(97deg) translateX(231px); } } .line:nth-child(21) { -webkit-transform: rotateY(267deg); transform: rotateY(267deg); } .line:nth-child(21) .spark { -webkit-animation: spark21 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark21 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(21) .fire { -webkit-animation: fire 1740ms -798ms linear infinite; animation: fire 1740ms -798ms linear infinite; } @-webkit-keyframes spark21 { 0% { -webkit-transform: translateY(629px); transform: translateY(629px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(357deg) translateX(169px); transform: rotateZ(357deg) translateX(169px); } } @keyframes spark21 { 0% { -webkit-transform: translateY(629px); transform: translateY(629px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(357deg) translateX(169px); transform: rotateZ(357deg) translateX(169px); } } .line:nth-child(22) { -webkit-transform: rotateY(188deg); transform: rotateY(188deg); } .line:nth-child(22) .spark { -webkit-animation: spark22 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark22 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(22) .fire { -webkit-animation: fire 1132ms -81ms linear infinite; animation: fire 1132ms -81ms linear infinite; } @-webkit-keyframes spark22 { 0% { -webkit-transform: translateY(633px); transform: translateY(633px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(253deg) translateX(253px); transform: rotateZ(253deg) translateX(253px); } } @keyframes spark22 { 0% { -webkit-transform: translateY(633px); transform: translateY(633px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(253deg) translateX(253px); transform: rotateZ(253deg) translateX(253px); } } .line:nth-child(23) { -webkit-transform: rotateY(194deg); transform: rotateY(194deg); } .line:nth-child(23) .spark { -webkit-animation: spark23 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark23 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(23) .fire { -webkit-animation: fire 1562ms -518ms linear infinite; animation: fire 1562ms -518ms linear infinite; } @-webkit-keyframes spark23 { 0% { -webkit-transform: translateY(625px); transform: translateY(625px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(324deg) translateX(212px); transform: rotateZ(324deg) translateX(212px); } } @keyframes spark23 { 0% { -webkit-transform: translateY(625px); transform: translateY(625px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(324deg) translateX(212px); transform: rotateZ(324deg) translateX(212px); } } .line:nth-child(24) { -webkit-transform: rotateY(276deg); transform: rotateY(276deg); } .line:nth-child(24) .spark { -webkit-animation: spark24 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark24 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(24) .fire { -webkit-animation: fire 1759ms -563ms linear infinite; animation: fire 1759ms -563ms linear infinite; } @-webkit-keyframes spark24 { 0% { -webkit-transform: translateY(647px); transform: translateY(647px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(193deg) translateX(157px); transform: rotateZ(193deg) translateX(157px); } } @keyframes spark24 { 0% { -webkit-transform: translateY(647px); transform: translateY(647px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(193deg) translateX(157px); transform: rotateZ(193deg) translateX(157px); } } .line:nth-child(25) { -webkit-transform: rotateY(216deg); transform: rotateY(216deg); } .line:nth-child(25) .spark { -webkit-animation: spark25 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark25 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(25) .fire { -webkit-animation: fire 1209ms -963ms linear infinite; animation: fire 1209ms -963ms linear infinite; } @-webkit-keyframes spark25 { 0% { -webkit-transform: translateY(507px); transform: translateY(507px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(166deg) translateX(196px); transform: rotateZ(166deg) translateX(196px); } } @keyframes spark25 { 0% { -webkit-transform: translateY(507px); transform: translateY(507px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(166deg) translateX(196px); transform: rotateZ(166deg) translateX(196px); } } .line:nth-child(26) { -webkit-transform: rotateY(116deg); transform: rotateY(116deg); } .line:nth-child(26) .spark { -webkit-animation: spark26 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark26 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(26) .fire { -webkit-animation: fire 1624ms -551ms linear infinite; animation: fire 1624ms -551ms linear infinite; } @-webkit-keyframes spark26 { 0% { -webkit-transform: translateY(571px); transform: translateY(571px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(41deg) translateX(238px); transform: rotateZ(41deg) translateX(238px); } } @keyframes spark26 { 0% { -webkit-transform: translateY(571px); transform: translateY(571px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(41deg) translateX(238px); transform: rotateZ(41deg) translateX(238px); } } .line:nth-child(27) { -webkit-transform: rotateY(208deg); transform: rotateY(208deg); } .line:nth-child(27) .spark { -webkit-animation: spark27 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark27 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(27) .fire { -webkit-animation: fire 1349ms -948ms linear infinite; animation: fire 1349ms -948ms linear infinite; } @-webkit-keyframes spark27 { 0% { -webkit-transform: translateY(624px); transform: translateY(624px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(64deg) translateX(218px); transform: rotateZ(64deg) translateX(218px); } } @keyframes spark27 { 0% { -webkit-transform: translateY(624px); transform: translateY(624px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(64deg) translateX(218px); transform: rotateZ(64deg) translateX(218px); } } .line:nth-child(28) { -webkit-transform: rotateY(56deg); transform: rotateY(56deg); } .line:nth-child(28) .spark { -webkit-animation: spark28 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark28 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(28) .fire { -webkit-animation: fire 1607ms -784ms linear infinite; animation: fire 1607ms -784ms linear infinite; } @-webkit-keyframes spark28 { 0% { -webkit-transform: translateY(552px); transform: translateY(552px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(67deg) translateX(268px); transform: rotateZ(67deg) translateX(268px); } } @keyframes spark28 { 0% { -webkit-transform: translateY(552px); transform: translateY(552px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(67deg) translateX(268px); transform: rotateZ(67deg) translateX(268px); } } .line:nth-child(29) { -webkit-transform: rotateY(49deg); transform: rotateY(49deg); } .line:nth-child(29) .spark { -webkit-animation: spark29 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark29 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(29) .fire { -webkit-animation: fire 1612ms -611ms linear infinite; animation: fire 1612ms -611ms linear infinite; } @-webkit-keyframes spark29 { 0% { -webkit-transform: translateY(583px); transform: translateY(583px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(315deg) translateX(284px); transform: rotateZ(315deg) translateX(284px); } } @keyframes spark29 { 0% { -webkit-transform: translateY(583px); transform: translateY(583px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(315deg) translateX(284px); transform: rotateZ(315deg) translateX(284px); } } .line:nth-child(30) { -webkit-transform: rotateY(138deg); transform: rotateY(138deg); } .line:nth-child(30) .spark { -webkit-animation: spark30 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark30 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(30) .fire { -webkit-animation: fire 1670ms -996ms linear infinite; animation: fire 1670ms -996ms linear infinite; } @-webkit-keyframes spark30 { 0% { -webkit-transform: translateY(538px); transform: translateY(538px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(269deg) translateX(168px); transform: rotateZ(269deg) translateX(168px); } } @keyframes spark30 { 0% { -webkit-transform: translateY(538px); transform: translateY(538px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(269deg) translateX(168px); transform: rotateZ(269deg) translateX(168px); } } .line:nth-child(31) { -webkit-transform: rotateY(32deg); transform: rotateY(32deg); } .line:nth-child(31) .spark { -webkit-animation: spark31 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark31 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(31) .fire { -webkit-animation: fire 1391ms -931ms linear infinite; animation: fire 1391ms -931ms linear infinite; } @-webkit-keyframes spark31 { 0% { -webkit-transform: translateY(646px); transform: translateY(646px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(283deg) translateX(275px); transform: rotateZ(283deg) translateX(275px); } } @keyframes spark31 { 0% { -webkit-transform: translateY(646px); transform: translateY(646px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(283deg) translateX(275px); transform: rotateZ(283deg) translateX(275px); } } .line:nth-child(32) { -webkit-transform: rotateY(351deg); transform: rotateY(351deg); } .line:nth-child(32) .spark { -webkit-animation: spark32 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark32 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(32) .fire { -webkit-animation: fire 1007ms -934ms linear infinite; animation: fire 1007ms -934ms linear infinite; } @-webkit-keyframes spark32 { 0% { -webkit-transform: translateY(648px); transform: translateY(648px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(155deg) translateX(239px); transform: rotateZ(155deg) translateX(239px); } } @keyframes spark32 { 0% { -webkit-transform: translateY(648px); transform: translateY(648px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(155deg) translateX(239px); transform: rotateZ(155deg) translateX(239px); } } .line:nth-child(33) { -webkit-transform: rotateY(164deg); transform: rotateY(164deg); } .line:nth-child(33) .spark { -webkit-animation: spark33 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark33 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(33) .fire { -webkit-animation: fire 1797ms -116ms linear infinite; animation: fire 1797ms -116ms linear infinite; } @-webkit-keyframes spark33 { 0% { -webkit-transform: translateY(595px); transform: translateY(595px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(246deg) translateX(237px); transform: rotateZ(246deg) translateX(237px); } } @keyframes spark33 { 0% { -webkit-transform: translateY(595px); transform: translateY(595px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(246deg) translateX(237px); transform: rotateZ(246deg) translateX(237px); } } .line:nth-child(34) { -webkit-transform: rotateY(153deg); transform: rotateY(153deg); } .line:nth-child(34) .spark { -webkit-animation: spark34 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark34 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(34) .fire { -webkit-animation: fire 1396ms -425ms linear infinite; animation: fire 1396ms -425ms linear infinite; } @-webkit-keyframes spark34 { 0% { -webkit-transform: translateY(517px); transform: translateY(517px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(259deg) translateX(225px); transform: rotateZ(259deg) translateX(225px); } } @keyframes spark34 { 0% { -webkit-transform: translateY(517px); transform: translateY(517px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(259deg) translateX(225px); transform: rotateZ(259deg) translateX(225px); } } .line:nth-child(35) { -webkit-transform: rotateY(96deg); transform: rotateY(96deg); } .line:nth-child(35) .spark { -webkit-animation: spark35 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark35 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(35) .fire { -webkit-animation: fire 1673ms -878ms linear infinite; animation: fire 1673ms -878ms linear infinite; } @-webkit-keyframes spark35 { 0% { -webkit-transform: translateY(621px); transform: translateY(621px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(199deg) translateX(255px); transform: rotateZ(199deg) translateX(255px); } } @keyframes spark35 { 0% { -webkit-transform: translateY(621px); transform: translateY(621px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(199deg) translateX(255px); transform: rotateZ(199deg) translateX(255px); } } .line:nth-child(36) { -webkit-transform: rotateY(36deg); transform: rotateY(36deg); } .line:nth-child(36) .spark { -webkit-animation: spark36 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark36 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(36) .fire { -webkit-animation: fire 1597ms -958ms linear infinite; animation: fire 1597ms -958ms linear infinite; } @-webkit-keyframes spark36 { 0% { -webkit-transform: translateY(583px); transform: translateY(583px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(82deg) translateX(125px); transform: rotateZ(82deg) translateX(125px); } } @keyframes spark36 { 0% { -webkit-transform: translateY(583px); transform: translateY(583px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(82deg) translateX(125px); transform: rotateZ(82deg) translateX(125px); } } .line:nth-child(37) { -webkit-transform: rotateY(161deg); transform: rotateY(161deg); } .line:nth-child(37) .spark { -webkit-animation: spark37 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark37 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(37) .fire { -webkit-animation: fire 1884ms -947ms linear infinite; animation: fire 1884ms -947ms linear infinite; } @-webkit-keyframes spark37 { 0% { -webkit-transform: translateY(560px); transform: translateY(560px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(294deg) translateX(148px); transform: rotateZ(294deg) translateX(148px); } } @keyframes spark37 { 0% { -webkit-transform: translateY(560px); transform: translateY(560px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(294deg) translateX(148px); transform: rotateZ(294deg) translateX(148px); } } .line:nth-child(38) { -webkit-transform: rotateY(139deg); transform: rotateY(139deg); } .line:nth-child(38) .spark { -webkit-animation: spark38 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark38 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(38) .fire { -webkit-animation: fire 1941ms -473ms linear infinite; animation: fire 1941ms -473ms linear infinite; } @-webkit-keyframes spark38 { 0% { -webkit-transform: translateY(595px); transform: translateY(595px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(44deg) translateX(229px); transform: rotateZ(44deg) translateX(229px); } } @keyframes spark38 { 0% { -webkit-transform: translateY(595px); transform: translateY(595px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(44deg) translateX(229px); transform: rotateZ(44deg) translateX(229px); } } .line:nth-child(39) { -webkit-transform: rotateY(300deg); transform: rotateY(300deg); } .line:nth-child(39) .spark { -webkit-animation: spark39 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark39 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(39) .fire { -webkit-animation: fire 1742ms -918ms linear infinite; animation: fire 1742ms -918ms linear infinite; } @-webkit-keyframes spark39 { 0% { -webkit-transform: translateY(595px); transform: translateY(595px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(168deg) translateX(203px); transform: rotateZ(168deg) translateX(203px); } } @keyframes spark39 { 0% { -webkit-transform: translateY(595px); transform: translateY(595px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(168deg) translateX(203px); transform: rotateZ(168deg) translateX(203px); } } .line:nth-child(40) { -webkit-transform: rotateY(19deg); transform: rotateY(19deg); } .line:nth-child(40) .spark { -webkit-animation: spark40 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark40 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(40) .fire { -webkit-animation: fire 1620ms -970ms linear infinite; animation: fire 1620ms -970ms linear infinite; } @-webkit-keyframes spark40 { 0% { -webkit-transform: translateY(553px); transform: translateY(553px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(259deg) translateX(237px); transform: rotateZ(259deg) translateX(237px); } } @keyframes spark40 { 0% { -webkit-transform: translateY(553px); transform: translateY(553px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(259deg) translateX(237px); transform: rotateZ(259deg) translateX(237px); } } .line:nth-child(41) { -webkit-transform: rotateY(38deg); transform: rotateY(38deg); } .line:nth-child(41) .spark { -webkit-animation: spark41 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark41 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(41) .fire { -webkit-animation: fire 1291ms -263ms linear infinite; animation: fire 1291ms -263ms linear infinite; } @-webkit-keyframes spark41 { 0% { -webkit-transform: translateY(611px); transform: translateY(611px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(150deg) translateX(225px); transform: rotateZ(150deg) translateX(225px); } } @keyframes spark41 { 0% { -webkit-transform: translateY(611px); transform: translateY(611px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(150deg) translateX(225px); transform: rotateZ(150deg) translateX(225px); } } .line:nth-child(42) { -webkit-transform: rotateY(27deg); transform: rotateY(27deg); } .line:nth-child(42) .spark { -webkit-animation: spark42 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark42 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(42) .fire { -webkit-animation: fire 1915ms -721ms linear infinite; animation: fire 1915ms -721ms linear infinite; } @-webkit-keyframes spark42 { 0% { -webkit-transform: translateY(568px); transform: translateY(568px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(290deg) translateX(203px); transform: rotateZ(290deg) translateX(203px); } } @keyframes spark42 { 0% { -webkit-transform: translateY(568px); transform: translateY(568px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(290deg) translateX(203px); transform: rotateZ(290deg) translateX(203px); } } .line:nth-child(43) { -webkit-transform: rotateY(29deg); transform: rotateY(29deg); } .line:nth-child(43) .spark { -webkit-animation: spark43 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark43 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(43) .fire { -webkit-animation: fire 1061ms -913ms linear infinite; animation: fire 1061ms -913ms linear infinite; } @-webkit-keyframes spark43 { 0% { -webkit-transform: translateY(644px); transform: translateY(644px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(297deg) translateX(201px); transform: rotateZ(297deg) translateX(201px); } } @keyframes spark43 { 0% { -webkit-transform: translateY(644px); transform: translateY(644px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(297deg) translateX(201px); transform: rotateZ(297deg) translateX(201px); } } .line:nth-child(44) { -webkit-transform: rotateY(219deg); transform: rotateY(219deg); } .line:nth-child(44) .spark { -webkit-animation: spark44 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark44 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(44) .fire { -webkit-animation: fire 1578ms -880ms linear infinite; animation: fire 1578ms -880ms linear infinite; } @-webkit-keyframes spark44 { 0% { -webkit-transform: translateY(521px); transform: translateY(521px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(77deg) translateX(211px); transform: rotateZ(77deg) translateX(211px); } } @keyframes spark44 { 0% { -webkit-transform: translateY(521px); transform: translateY(521px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(77deg) translateX(211px); transform: rotateZ(77deg) translateX(211px); } } .line:nth-child(45) { -webkit-transform: rotateY(343deg); transform: rotateY(343deg); } .line:nth-child(45) .spark { -webkit-animation: spark45 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark45 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(45) .fire { -webkit-animation: fire 1900ms -292ms linear infinite; animation: fire 1900ms -292ms linear infinite; } @-webkit-keyframes spark45 { 0% { -webkit-transform: translateY(512px); transform: translateY(512px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(331deg) translateX(279px); transform: rotateZ(331deg) translateX(279px); } } @keyframes spark45 { 0% { -webkit-transform: translateY(512px); transform: translateY(512px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(331deg) translateX(279px); transform: rotateZ(331deg) translateX(279px); } } .line:nth-child(46) { -webkit-transform: rotateY(146deg); transform: rotateY(146deg); } .line:nth-child(46) .spark { -webkit-animation: spark46 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark46 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(46) .fire { -webkit-animation: fire 1095ms -548ms linear infinite; animation: fire 1095ms -548ms linear infinite; } @-webkit-keyframes spark46 { 0% { -webkit-transform: translateY(525px); transform: translateY(525px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(139deg) translateX(115px); transform: rotateZ(139deg) translateX(115px); } } @keyframes spark46 { 0% { -webkit-transform: translateY(525px); transform: translateY(525px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(139deg) translateX(115px); transform: rotateZ(139deg) translateX(115px); } } .line:nth-child(47) { -webkit-transform: rotateY(256deg); transform: rotateY(256deg); } .line:nth-child(47) .spark { -webkit-animation: spark47 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark47 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(47) .fire { -webkit-animation: fire 1537ms -716ms linear infinite; animation: fire 1537ms -716ms linear infinite; } @-webkit-keyframes spark47 { 0% { -webkit-transform: translateY(621px); transform: translateY(621px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(59deg) translateX(280px); transform: rotateZ(59deg) translateX(280px); } } @keyframes spark47 { 0% { -webkit-transform: translateY(621px); transform: translateY(621px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(59deg) translateX(280px); transform: rotateZ(59deg) translateX(280px); } } .line:nth-child(48) { -webkit-transform: rotateY(100deg); transform: rotateY(100deg); } .line:nth-child(48) .spark { -webkit-animation: spark48 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark48 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(48) .fire { -webkit-animation: fire 1212ms -609ms linear infinite; animation: fire 1212ms -609ms linear infinite; } @-webkit-keyframes spark48 { 0% { -webkit-transform: translateY(571px); transform: translateY(571px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(6deg) translateX(164px); transform: rotateZ(6deg) translateX(164px); } } @keyframes spark48 { 0% { -webkit-transform: translateY(571px); transform: translateY(571px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(6deg) translateX(164px); transform: rotateZ(6deg) translateX(164px); } } .line:nth-child(49) { -webkit-transform: rotateY(103deg); transform: rotateY(103deg); } .line:nth-child(49) .spark { -webkit-animation: spark49 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark49 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(49) .fire { -webkit-animation: fire 1258ms -102ms linear infinite; animation: fire 1258ms -102ms linear infinite; } @-webkit-keyframes spark49 { 0% { -webkit-transform: translateY(539px); transform: translateY(539px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(316deg) translateX(168px); transform: rotateZ(316deg) translateX(168px); } } @keyframes spark49 { 0% { -webkit-transform: translateY(539px); transform: translateY(539px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(316deg) translateX(168px); transform: rotateZ(316deg) translateX(168px); } } .line:nth-child(50) { -webkit-transform: rotateY(33deg); transform: rotateY(33deg); } .line:nth-child(50) .spark { -webkit-animation: spark50 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark50 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(50) .fire { -webkit-animation: fire 1949ms -68ms linear infinite; animation: fire 1949ms -68ms linear infinite; } @-webkit-keyframes spark50 { 0% { -webkit-transform: translateY(508px); transform: translateY(508px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(293deg) translateX(277px); transform: rotateZ(293deg) translateX(277px); } } @keyframes spark50 { 0% { -webkit-transform: translateY(508px); transform: translateY(508px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(293deg) translateX(277px); transform: rotateZ(293deg) translateX(277px); } } .line:nth-child(51) { -webkit-transform: rotateY(354deg); transform: rotateY(354deg); } .line:nth-child(51) .spark { -webkit-animation: spark51 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark51 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(51) .fire { -webkit-animation: fire 1211ms -584ms linear infinite; animation: fire 1211ms -584ms linear infinite; } @-webkit-keyframes spark51 { 0% { -webkit-transform: translateY(523px); transform: translateY(523px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(307deg) translateX(156px); transform: rotateZ(307deg) translateX(156px); } } @keyframes spark51 { 0% { -webkit-transform: translateY(523px); transform: translateY(523px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(307deg) translateX(156px); transform: rotateZ(307deg) translateX(156px); } } .line:nth-child(52) { -webkit-transform: rotateY(5deg); transform: rotateY(5deg); } .line:nth-child(52) .spark { -webkit-animation: spark52 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark52 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(52) .fire { -webkit-animation: fire 1527ms -883ms linear infinite; animation: fire 1527ms -883ms linear infinite; } @-webkit-keyframes spark52 { 0% { -webkit-transform: translateY(582px); transform: translateY(582px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(114deg) translateX(266px); transform: rotateZ(114deg) translateX(266px); } } @keyframes spark52 { 0% { -webkit-transform: translateY(582px); transform: translateY(582px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(114deg) translateX(266px); transform: rotateZ(114deg) translateX(266px); } } .line:nth-child(53) { -webkit-transform: rotateY(351deg); transform: rotateY(351deg); } .line:nth-child(53) .spark { -webkit-animation: spark53 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark53 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(53) .fire { -webkit-animation: fire 1948ms -77ms linear infinite; animation: fire 1948ms -77ms linear infinite; } @-webkit-keyframes spark53 { 0% { -webkit-transform: translateY(591px); transform: translateY(591px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(181deg) translateX(261px); transform: rotateZ(181deg) translateX(261px); } } @keyframes spark53 { 0% { -webkit-transform: translateY(591px); transform: translateY(591px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(181deg) translateX(261px); transform: rotateZ(181deg) translateX(261px); } } .line:nth-child(54) { -webkit-transform: rotateY(323deg); transform: rotateY(323deg); } .line:nth-child(54) .spark { -webkit-animation: spark54 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark54 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(54) .fire { -webkit-animation: fire 1204ms -486ms linear infinite; animation: fire 1204ms -486ms linear infinite; } @-webkit-keyframes spark54 { 0% { -webkit-transform: translateY(568px); transform: translateY(568px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(223deg) translateX(218px); transform: rotateZ(223deg) translateX(218px); } } @keyframes spark54 { 0% { -webkit-transform: translateY(568px); transform: translateY(568px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(223deg) translateX(218px); transform: rotateZ(223deg) translateX(218px); } } .line:nth-child(55) { -webkit-transform: rotateY(77deg); transform: rotateY(77deg); } .line:nth-child(55) .spark { -webkit-animation: spark55 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark55 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(55) .fire { -webkit-animation: fire 1480ms -114ms linear infinite; animation: fire 1480ms -114ms linear infinite; } @-webkit-keyframes spark55 { 0% { -webkit-transform: translateY(541px); transform: translateY(541px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(342deg) translateX(121px); transform: rotateZ(342deg) translateX(121px); } } @keyframes spark55 { 0% { -webkit-transform: translateY(541px); transform: translateY(541px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(342deg) translateX(121px); transform: rotateZ(342deg) translateX(121px); } } .line:nth-child(56) { -webkit-transform: rotateY(121deg); transform: rotateY(121deg); } .line:nth-child(56) .spark { -webkit-animation: spark56 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark56 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(56) .fire { -webkit-animation: fire 1149ms -300ms linear infinite; animation: fire 1149ms -300ms linear infinite; } @-webkit-keyframes spark56 { 0% { -webkit-transform: translateY(563px); transform: translateY(563px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(65deg) translateX(159px); transform: rotateZ(65deg) translateX(159px); } } @keyframes spark56 { 0% { -webkit-transform: translateY(563px); transform: translateY(563px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(65deg) translateX(159px); transform: rotateZ(65deg) translateX(159px); } } .line:nth-child(57) { -webkit-transform: rotateY(293deg); transform: rotateY(293deg); } .line:nth-child(57) .spark { -webkit-animation: spark57 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark57 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(57) .fire { -webkit-animation: fire 1501ms -283ms linear infinite; animation: fire 1501ms -283ms linear infinite; } @-webkit-keyframes spark57 { 0% { -webkit-transform: translateY(639px); transform: translateY(639px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(106deg) translateX(159px); transform: rotateZ(106deg) translateX(159px); } } @keyframes spark57 { 0% { -webkit-transform: translateY(639px); transform: translateY(639px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(106deg) translateX(159px); transform: rotateZ(106deg) translateX(159px); } } .line:nth-child(58) { -webkit-transform: rotateY(275deg); transform: rotateY(275deg); } .line:nth-child(58) .spark { -webkit-animation: spark58 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark58 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(58) .fire { -webkit-animation: fire 1568ms -459ms linear infinite; animation: fire 1568ms -459ms linear infinite; } @-webkit-keyframes spark58 { 0% { -webkit-transform: translateY(575px); transform: translateY(575px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(278deg) translateX(130px); transform: rotateZ(278deg) translateX(130px); } } @keyframes spark58 { 0% { -webkit-transform: translateY(575px); transform: translateY(575px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(278deg) translateX(130px); transform: rotateZ(278deg) translateX(130px); } } .line:nth-child(59) { -webkit-transform: rotateY(120deg); transform: rotateY(120deg); } .line:nth-child(59) .spark { -webkit-animation: spark59 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark59 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(59) .fire { -webkit-animation: fire 1826ms -92ms linear infinite; animation: fire 1826ms -92ms linear infinite; } @-webkit-keyframes spark59 { 0% { -webkit-transform: translateY(643px); transform: translateY(643px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(114deg) translateX(142px); transform: rotateZ(114deg) translateX(142px); } } @keyframes spark59 { 0% { -webkit-transform: translateY(643px); transform: translateY(643px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(114deg) translateX(142px); transform: rotateZ(114deg) translateX(142px); } } .line:nth-child(60) { -webkit-transform: rotateY(83deg); transform: rotateY(83deg); } .line:nth-child(60) .spark { -webkit-animation: spark60 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark60 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(60) .fire { -webkit-animation: fire 1026ms -980ms linear infinite; animation: fire 1026ms -980ms linear infinite; } @-webkit-keyframes spark60 { 0% { -webkit-transform: translateY(552px); transform: translateY(552px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(53deg) translateX(114px); transform: rotateZ(53deg) translateX(114px); } } @keyframes spark60 { 0% { -webkit-transform: translateY(552px); transform: translateY(552px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(53deg) translateX(114px); transform: rotateZ(53deg) translateX(114px); } } .line:nth-child(61) { -webkit-transform: rotateY(129deg); transform: rotateY(129deg); } .line:nth-child(61) .spark { -webkit-animation: spark61 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark61 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(61) .fire { -webkit-animation: fire 1946ms -585ms linear infinite; animation: fire 1946ms -585ms linear infinite; } @-webkit-keyframes spark61 { 0% { -webkit-transform: translateY(644px); transform: translateY(644px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(94deg) translateX(254px); transform: rotateZ(94deg) translateX(254px); } } @keyframes spark61 { 0% { -webkit-transform: translateY(644px); transform: translateY(644px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(94deg) translateX(254px); transform: rotateZ(94deg) translateX(254px); } } .line:nth-child(62) { -webkit-transform: rotateY(121deg); transform: rotateY(121deg); } .line:nth-child(62) .spark { -webkit-animation: spark62 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark62 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(62) .fire { -webkit-animation: fire 1346ms -842ms linear infinite; animation: fire 1346ms -842ms linear infinite; } @-webkit-keyframes spark62 { 0% { -webkit-transform: translateY(641px); transform: translateY(641px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(107deg) translateX(183px); transform: rotateZ(107deg) translateX(183px); } } @keyframes spark62 { 0% { -webkit-transform: translateY(641px); transform: translateY(641px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(107deg) translateX(183px); transform: rotateZ(107deg) translateX(183px); } } .line:nth-child(63) { -webkit-transform: rotateY(255deg); transform: rotateY(255deg); } .line:nth-child(63) .spark { -webkit-animation: spark63 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark63 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(63) .fire { -webkit-animation: fire 1860ms -426ms linear infinite; animation: fire 1860ms -426ms linear infinite; } @-webkit-keyframes spark63 { 0% { -webkit-transform: translateY(527px); transform: translateY(527px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(31deg) translateX(120px); transform: rotateZ(31deg) translateX(120px); } } @keyframes spark63 { 0% { -webkit-transform: translateY(527px); transform: translateY(527px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(31deg) translateX(120px); transform: rotateZ(31deg) translateX(120px); } } .line:nth-child(64) { -webkit-transform: rotateY(240deg); transform: rotateY(240deg); } .line:nth-child(64) .spark { -webkit-animation: spark64 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark64 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(64) .fire { -webkit-animation: fire 1492ms -981ms linear infinite; animation: fire 1492ms -981ms linear infinite; } @-webkit-keyframes spark64 { 0% { -webkit-transform: translateY(546px); transform: translateY(546px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(171deg) translateX(126px); transform: rotateZ(171deg) translateX(126px); } } @keyframes spark64 { 0% { -webkit-transform: translateY(546px); transform: translateY(546px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(171deg) translateX(126px); transform: rotateZ(171deg) translateX(126px); } } .line:nth-child(65) { -webkit-transform: rotateY(10deg); transform: rotateY(10deg); } .line:nth-child(65) .spark { -webkit-animation: spark65 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark65 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(65) .fire { -webkit-animation: fire 1196ms -696ms linear infinite; animation: fire 1196ms -696ms linear infinite; } @-webkit-keyframes spark65 { 0% { -webkit-transform: translateY(544px); transform: translateY(544px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(136deg) translateX(298px); transform: rotateZ(136deg) translateX(298px); } } @keyframes spark65 { 0% { -webkit-transform: translateY(544px); transform: translateY(544px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(136deg) translateX(298px); transform: rotateZ(136deg) translateX(298px); } } .line:nth-child(66) { -webkit-transform: rotateY(168deg); transform: rotateY(168deg); } .line:nth-child(66) .spark { -webkit-animation: spark66 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark66 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(66) .fire { -webkit-animation: fire 1172ms -472ms linear infinite; animation: fire 1172ms -472ms linear infinite; } @-webkit-keyframes spark66 { 0% { -webkit-transform: translateY(512px); transform: translateY(512px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(332deg) translateX(195px); transform: rotateZ(332deg) translateX(195px); } } @keyframes spark66 { 0% { -webkit-transform: translateY(512px); transform: translateY(512px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(332deg) translateX(195px); transform: rotateZ(332deg) translateX(195px); } } .line:nth-child(67) { -webkit-transform: rotateY(146deg); transform: rotateY(146deg); } .line:nth-child(67) .spark { -webkit-animation: spark67 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark67 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(67) .fire { -webkit-animation: fire 1281ms -786ms linear infinite; animation: fire 1281ms -786ms linear infinite; } @-webkit-keyframes spark67 { 0% { -webkit-transform: translateY(649px); transform: translateY(649px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(67deg) translateX(164px); transform: rotateZ(67deg) translateX(164px); } } @keyframes spark67 { 0% { -webkit-transform: translateY(649px); transform: translateY(649px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(67deg) translateX(164px); transform: rotateZ(67deg) translateX(164px); } } .line:nth-child(68) { -webkit-transform: rotateY(182deg); transform: rotateY(182deg); } .line:nth-child(68) .spark { -webkit-animation: spark68 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark68 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(68) .fire { -webkit-animation: fire 1530ms -216ms linear infinite; animation: fire 1530ms -216ms linear infinite; } @-webkit-keyframes spark68 { 0% { -webkit-transform: translateY(524px); transform: translateY(524px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(140deg) translateX(265px); transform: rotateZ(140deg) translateX(265px); } } @keyframes spark68 { 0% { -webkit-transform: translateY(524px); transform: translateY(524px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(140deg) translateX(265px); transform: rotateZ(140deg) translateX(265px); } } .line:nth-child(69) { -webkit-transform: rotateY(20deg); transform: rotateY(20deg); } .line:nth-child(69) .spark { -webkit-animation: spark69 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark69 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(69) .fire { -webkit-animation: fire 1653ms -981ms linear infinite; animation: fire 1653ms -981ms linear infinite; } @-webkit-keyframes spark69 { 0% { -webkit-transform: translateY(605px); transform: translateY(605px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(264deg) translateX(223px); transform: rotateZ(264deg) translateX(223px); } } @keyframes spark69 { 0% { -webkit-transform: translateY(605px); transform: translateY(605px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(264deg) translateX(223px); transform: rotateZ(264deg) translateX(223px); } } .line:nth-child(70) { -webkit-transform: rotateY(131deg); transform: rotateY(131deg); } .line:nth-child(70) .spark { -webkit-animation: spark70 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark70 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(70) .fire { -webkit-animation: fire 1350ms -643ms linear infinite; animation: fire 1350ms -643ms linear infinite; } @-webkit-keyframes spark70 { 0% { -webkit-transform: translateY(618px); transform: translateY(618px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(24deg) translateX(155px); transform: rotateZ(24deg) translateX(155px); } } @keyframes spark70 { 0% { -webkit-transform: translateY(618px); transform: translateY(618px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(24deg) translateX(155px); transform: rotateZ(24deg) translateX(155px); } } .line:nth-child(71) { -webkit-transform: rotateY(62deg); transform: rotateY(62deg); } .line:nth-child(71) .spark { -webkit-animation: spark71 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark71 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(71) .fire { -webkit-animation: fire 1183ms -969ms linear infinite; animation: fire 1183ms -969ms linear infinite; } @-webkit-keyframes spark71 { 0% { -webkit-transform: translateY(588px); transform: translateY(588px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(60deg) translateX(287px); transform: rotateZ(60deg) translateX(287px); } } @keyframes spark71 { 0% { -webkit-transform: translateY(588px); transform: translateY(588px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(60deg) translateX(287px); transform: rotateZ(60deg) translateX(287px); } } .line:nth-child(72) { -webkit-transform: rotateY(286deg); transform: rotateY(286deg); } .line:nth-child(72) .spark { -webkit-animation: spark72 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark72 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(72) .fire { -webkit-animation: fire 1661ms -194ms linear infinite; animation: fire 1661ms -194ms linear infinite; } @-webkit-keyframes spark72 { 0% { -webkit-transform: translateY(588px); transform: translateY(588px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(81deg) translateX(126px); transform: rotateZ(81deg) translateX(126px); } } @keyframes spark72 { 0% { -webkit-transform: translateY(588px); transform: translateY(588px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(81deg) translateX(126px); transform: rotateZ(81deg) translateX(126px); } } .line:nth-child(73) { -webkit-transform: rotateY(7deg); transform: rotateY(7deg); } .line:nth-child(73) .spark { -webkit-animation: spark73 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark73 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(73) .fire { -webkit-animation: fire 1673ms -740ms linear infinite; animation: fire 1673ms -740ms linear infinite; } @-webkit-keyframes spark73 { 0% { -webkit-transform: translateY(579px); transform: translateY(579px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(67deg) translateX(187px); transform: rotateZ(67deg) translateX(187px); } } @keyframes spark73 { 0% { -webkit-transform: translateY(579px); transform: translateY(579px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(67deg) translateX(187px); transform: rotateZ(67deg) translateX(187px); } } .line:nth-child(74) { -webkit-transform: rotateY(336deg); transform: rotateY(336deg); } .line:nth-child(74) .spark { -webkit-animation: spark74 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark74 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(74) .fire { -webkit-animation: fire 1588ms -545ms linear infinite; animation: fire 1588ms -545ms linear infinite; } @-webkit-keyframes spark74 { 0% { -webkit-transform: translateY(548px); transform: translateY(548px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(212deg) translateX(273px); transform: rotateZ(212deg) translateX(273px); } } @keyframes spark74 { 0% { -webkit-transform: translateY(548px); transform: translateY(548px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(212deg) translateX(273px); transform: rotateZ(212deg) translateX(273px); } } .line:nth-child(75) { -webkit-transform: rotateY(220deg); transform: rotateY(220deg); } .line:nth-child(75) .spark { -webkit-animation: spark75 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark75 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(75) .fire { -webkit-animation: fire 1064ms -922ms linear infinite; animation: fire 1064ms -922ms linear infinite; } @-webkit-keyframes spark75 { 0% { -webkit-transform: translateY(563px); transform: translateY(563px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(286deg) translateX(137px); transform: rotateZ(286deg) translateX(137px); } } @keyframes spark75 { 0% { -webkit-transform: translateY(563px); transform: translateY(563px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(286deg) translateX(137px); transform: rotateZ(286deg) translateX(137px); } } .line:nth-child(76) { -webkit-transform: rotateY(229deg); transform: rotateY(229deg); } .line:nth-child(76) .spark { -webkit-animation: spark76 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark76 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(76) .fire { -webkit-animation: fire 1522ms -195ms linear infinite; animation: fire 1522ms -195ms linear infinite; } @-webkit-keyframes spark76 { 0% { -webkit-transform: translateY(585px); transform: translateY(585px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(207deg) translateX(294px); transform: rotateZ(207deg) translateX(294px); } } @keyframes spark76 { 0% { -webkit-transform: translateY(585px); transform: translateY(585px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(207deg) translateX(294px); transform: rotateZ(207deg) translateX(294px); } } .line:nth-child(77) { -webkit-transform: rotateY(139deg); transform: rotateY(139deg); } .line:nth-child(77) .spark { -webkit-animation: spark77 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark77 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(77) .fire { -webkit-animation: fire 1566ms -730ms linear infinite; animation: fire 1566ms -730ms linear infinite; } @-webkit-keyframes spark77 { 0% { -webkit-transform: translateY(645px); transform: translateY(645px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(118deg) translateX(284px); transform: rotateZ(118deg) translateX(284px); } } @keyframes spark77 { 0% { -webkit-transform: translateY(645px); transform: translateY(645px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(118deg) translateX(284px); transform: rotateZ(118deg) translateX(284px); } } .line:nth-child(78) { -webkit-transform: rotateY(38deg); transform: rotateY(38deg); } .line:nth-child(78) .spark { -webkit-animation: spark78 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark78 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(78) .fire { -webkit-animation: fire 1345ms -465ms linear infinite; animation: fire 1345ms -465ms linear infinite; } @-webkit-keyframes spark78 { 0% { -webkit-transform: translateY(537px); transform: translateY(537px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(224deg) translateX(250px); transform: rotateZ(224deg) translateX(250px); } } @keyframes spark78 { 0% { -webkit-transform: translateY(537px); transform: translateY(537px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(224deg) translateX(250px); transform: rotateZ(224deg) translateX(250px); } } .line:nth-child(79) { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .line:nth-child(79) .spark { -webkit-animation: spark79 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark79 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(79) .fire { -webkit-animation: fire 1117ms -377ms linear infinite; animation: fire 1117ms -377ms linear infinite; } @-webkit-keyframes spark79 { 0% { -webkit-transform: translateY(516px); transform: translateY(516px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(296deg) translateX(285px); transform: rotateZ(296deg) translateX(285px); } } @keyframes spark79 { 0% { -webkit-transform: translateY(516px); transform: translateY(516px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(296deg) translateX(285px); transform: rotateZ(296deg) translateX(285px); } } .line:nth-child(80) { -webkit-transform: rotateY(141deg); transform: rotateY(141deg); } .line:nth-child(80) .spark { -webkit-animation: spark80 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark80 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(80) .fire { -webkit-animation: fire 1548ms -598ms linear infinite; animation: fire 1548ms -598ms linear infinite; } @-webkit-keyframes spark80 { 0% { -webkit-transform: translateY(615px); transform: translateY(615px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(153deg) translateX(285px); transform: rotateZ(153deg) translateX(285px); } } @keyframes spark80 { 0% { -webkit-transform: translateY(615px); transform: translateY(615px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(153deg) translateX(285px); transform: rotateZ(153deg) translateX(285px); } } .line:nth-child(81) { -webkit-transform: rotateY(259deg); transform: rotateY(259deg); } .line:nth-child(81) .spark { -webkit-animation: spark81 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark81 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(81) .fire { -webkit-animation: fire 1592ms -70ms linear infinite; animation: fire 1592ms -70ms linear infinite; } @-webkit-keyframes spark81 { 0% { -webkit-transform: translateY(603px); transform: translateY(603px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(289deg) translateX(289px); transform: rotateZ(289deg) translateX(289px); } } @keyframes spark81 { 0% { -webkit-transform: translateY(603px); transform: translateY(603px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(289deg) translateX(289px); transform: rotateZ(289deg) translateX(289px); } } .line:nth-child(82) { -webkit-transform: rotateY(322deg); transform: rotateY(322deg); } .line:nth-child(82) .spark { -webkit-animation: spark82 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark82 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(82) .fire { -webkit-animation: fire 1078ms -695ms linear infinite; animation: fire 1078ms -695ms linear infinite; } @-webkit-keyframes spark82 { 0% { -webkit-transform: translateY(609px); transform: translateY(609px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(290deg) translateX(283px); transform: rotateZ(290deg) translateX(283px); } } @keyframes spark82 { 0% { -webkit-transform: translateY(609px); transform: translateY(609px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(290deg) translateX(283px); transform: rotateZ(290deg) translateX(283px); } } .line:nth-child(83) { -webkit-transform: rotateY(9deg); transform: rotateY(9deg); } .line:nth-child(83) .spark { -webkit-animation: spark83 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark83 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(83) .fire { -webkit-animation: fire 1744ms -101ms linear infinite; animation: fire 1744ms -101ms linear infinite; } @-webkit-keyframes spark83 { 0% { -webkit-transform: translateY(608px); transform: translateY(608px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(161deg) translateX(198px); transform: rotateZ(161deg) translateX(198px); } } @keyframes spark83 { 0% { -webkit-transform: translateY(608px); transform: translateY(608px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(161deg) translateX(198px); transform: rotateZ(161deg) translateX(198px); } } .line:nth-child(84) { -webkit-transform: rotateY(204deg); transform: rotateY(204deg); } .line:nth-child(84) .spark { -webkit-animation: spark84 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark84 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(84) .fire { -webkit-animation: fire 1517ms -325ms linear infinite; animation: fire 1517ms -325ms linear infinite; } @-webkit-keyframes spark84 { 0% { -webkit-transform: translateY(624px); transform: translateY(624px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(246deg) translateX(270px); transform: rotateZ(246deg) translateX(270px); } } @keyframes spark84 { 0% { -webkit-transform: translateY(624px); transform: translateY(624px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(246deg) translateX(270px); transform: rotateZ(246deg) translateX(270px); } } .line:nth-child(85) { -webkit-transform: rotateY(60deg); transform: rotateY(60deg); } .line:nth-child(85) .spark { -webkit-animation: spark85 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark85 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(85) .fire { -webkit-animation: fire 1697ms -721ms linear infinite; animation: fire 1697ms -721ms linear infinite; } @-webkit-keyframes spark85 { 0% { -webkit-transform: translateY(518px); transform: translateY(518px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(156deg) translateX(218px); transform: rotateZ(156deg) translateX(218px); } } @keyframes spark85 { 0% { -webkit-transform: translateY(518px); transform: translateY(518px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(156deg) translateX(218px); transform: rotateZ(156deg) translateX(218px); } } .line:nth-child(86) { -webkit-transform: rotateY(324deg); transform: rotateY(324deg); } .line:nth-child(86) .spark { -webkit-animation: spark86 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark86 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(86) .fire { -webkit-animation: fire 1494ms -96ms linear infinite; animation: fire 1494ms -96ms linear infinite; } @-webkit-keyframes spark86 { 0% { -webkit-transform: translateY(587px); transform: translateY(587px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(41deg) translateX(125px); transform: rotateZ(41deg) translateX(125px); } } @keyframes spark86 { 0% { -webkit-transform: translateY(587px); transform: translateY(587px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(41deg) translateX(125px); transform: rotateZ(41deg) translateX(125px); } } .line:nth-child(87) { -webkit-transform: rotateY(353deg); transform: rotateY(353deg); } .line:nth-child(87) .spark { -webkit-animation: spark87 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark87 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(87) .fire { -webkit-animation: fire 1394ms -385ms linear infinite; animation: fire 1394ms -385ms linear infinite; } @-webkit-keyframes spark87 { 0% { -webkit-transform: translateY(645px); transform: translateY(645px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(348deg) translateX(135px); transform: rotateZ(348deg) translateX(135px); } } @keyframes spark87 { 0% { -webkit-transform: translateY(645px); transform: translateY(645px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(348deg) translateX(135px); transform: rotateZ(348deg) translateX(135px); } } .line:nth-child(88) { -webkit-transform: rotateY(33deg); transform: rotateY(33deg); } .line:nth-child(88) .spark { -webkit-animation: spark88 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark88 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(88) .fire { -webkit-animation: fire 1650ms -1000ms linear infinite; animation: fire 1650ms -1000ms linear infinite; } @-webkit-keyframes spark88 { 0% { -webkit-transform: translateY(560px); transform: translateY(560px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(32deg) translateX(108px); transform: rotateZ(32deg) translateX(108px); } } @keyframes spark88 { 0% { -webkit-transform: translateY(560px); transform: translateY(560px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(32deg) translateX(108px); transform: rotateZ(32deg) translateX(108px); } } .line:nth-child(89) { -webkit-transform: rotateY(276deg); transform: rotateY(276deg); } .line:nth-child(89) .spark { -webkit-animation: spark89 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark89 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(89) .fire { -webkit-animation: fire 1179ms -867ms linear infinite; animation: fire 1179ms -867ms linear infinite; } @-webkit-keyframes spark89 { 0% { -webkit-transform: translateY(624px); transform: translateY(624px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(342deg) translateX(174px); transform: rotateZ(342deg) translateX(174px); } } @keyframes spark89 { 0% { -webkit-transform: translateY(624px); transform: translateY(624px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(342deg) translateX(174px); transform: rotateZ(342deg) translateX(174px); } } .line:nth-child(90) { -webkit-transform: rotateY(96deg); transform: rotateY(96deg); } .line:nth-child(90) .spark { -webkit-animation: spark90 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark90 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(90) .fire { -webkit-animation: fire 1095ms -247ms linear infinite; animation: fire 1095ms -247ms linear infinite; } @-webkit-keyframes spark90 { 0% { -webkit-transform: translateY(645px); transform: translateY(645px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(221deg) translateX(282px); transform: rotateZ(221deg) translateX(282px); } } @keyframes spark90 { 0% { -webkit-transform: translateY(645px); transform: translateY(645px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(221deg) translateX(282px); transform: rotateZ(221deg) translateX(282px); } } .line:nth-child(91) { -webkit-transform: rotateY(108deg); transform: rotateY(108deg); } .line:nth-child(91) .spark { -webkit-animation: spark91 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark91 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(91) .fire { -webkit-animation: fire 1555ms -477ms linear infinite; animation: fire 1555ms -477ms linear infinite; } @-webkit-keyframes spark91 { 0% { -webkit-transform: translateY(570px); transform: translateY(570px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(138deg) translateX(104px); transform: rotateZ(138deg) translateX(104px); } } @keyframes spark91 { 0% { -webkit-transform: translateY(570px); transform: translateY(570px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(138deg) translateX(104px); transform: rotateZ(138deg) translateX(104px); } } .line:nth-child(92) { -webkit-transform: rotateY(177deg); transform: rotateY(177deg); } .line:nth-child(92) .spark { -webkit-animation: spark92 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark92 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(92) .fire { -webkit-animation: fire 1507ms -96ms linear infinite; animation: fire 1507ms -96ms linear infinite; } @-webkit-keyframes spark92 { 0% { -webkit-transform: translateY(528px); transform: translateY(528px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(110deg) translateX(274px); transform: rotateZ(110deg) translateX(274px); } } @keyframes spark92 { 0% { -webkit-transform: translateY(528px); transform: translateY(528px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(110deg) translateX(274px); transform: rotateZ(110deg) translateX(274px); } } .line:nth-child(93) { -webkit-transform: rotateY(319deg); transform: rotateY(319deg); } .line:nth-child(93) .spark { -webkit-animation: spark93 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark93 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(93) .fire { -webkit-animation: fire 1148ms -228ms linear infinite; animation: fire 1148ms -228ms linear infinite; } @-webkit-keyframes spark93 { 0% { -webkit-transform: translateY(634px); transform: translateY(634px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(68deg) translateX(280px); transform: rotateZ(68deg) translateX(280px); } } @keyframes spark93 { 0% { -webkit-transform: translateY(634px); transform: translateY(634px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(68deg) translateX(280px); transform: rotateZ(68deg) translateX(280px); } } .line:nth-child(94) { -webkit-transform: rotateY(102deg); transform: rotateY(102deg); } .line:nth-child(94) .spark { -webkit-animation: spark94 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark94 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(94) .fire { -webkit-animation: fire 1020ms -760ms linear infinite; animation: fire 1020ms -760ms linear infinite; } @-webkit-keyframes spark94 { 0% { -webkit-transform: translateY(564px); transform: translateY(564px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(12deg) translateX(144px); transform: rotateZ(12deg) translateX(144px); } } @keyframes spark94 { 0% { -webkit-transform: translateY(564px); transform: translateY(564px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(12deg) translateX(144px); transform: rotateZ(12deg) translateX(144px); } } .line:nth-child(95) { -webkit-transform: rotateY(192deg); transform: rotateY(192deg); } .line:nth-child(95) .spark { -webkit-animation: spark95 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark95 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(95) .fire { -webkit-animation: fire 1008ms -525ms linear infinite; animation: fire 1008ms -525ms linear infinite; } @-webkit-keyframes spark95 { 0% { -webkit-transform: translateY(603px); transform: translateY(603px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(312deg) translateX(269px); transform: rotateZ(312deg) translateX(269px); } } @keyframes spark95 { 0% { -webkit-transform: translateY(603px); transform: translateY(603px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(312deg) translateX(269px); transform: rotateZ(312deg) translateX(269px); } } .line:nth-child(96) { -webkit-transform: rotateY(106deg); transform: rotateY(106deg); } .line:nth-child(96) .spark { -webkit-animation: spark96 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark96 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(96) .fire { -webkit-animation: fire 1127ms -124ms linear infinite; animation: fire 1127ms -124ms linear infinite; } @-webkit-keyframes spark96 { 0% { -webkit-transform: translateY(522px); transform: translateY(522px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(312deg) translateX(270px); transform: rotateZ(312deg) translateX(270px); } } @keyframes spark96 { 0% { -webkit-transform: translateY(522px); transform: translateY(522px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(312deg) translateX(270px); transform: rotateZ(312deg) translateX(270px); } } .line:nth-child(97) { -webkit-transform: rotateY(241deg); transform: rotateY(241deg); } .line:nth-child(97) .spark { -webkit-animation: spark97 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark97 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(97) .fire { -webkit-animation: fire 1676ms -442ms linear infinite; animation: fire 1676ms -442ms linear infinite; } @-webkit-keyframes spark97 { 0% { -webkit-transform: translateY(525px); transform: translateY(525px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(277deg) translateX(154px); transform: rotateZ(277deg) translateX(154px); } } @keyframes spark97 { 0% { -webkit-transform: translateY(525px); transform: translateY(525px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(277deg) translateX(154px); transform: rotateZ(277deg) translateX(154px); } } .line:nth-child(98) { -webkit-transform: rotateY(140deg); transform: rotateY(140deg); } .line:nth-child(98) .spark { -webkit-animation: spark98 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark98 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(98) .fire { -webkit-animation: fire 1643ms -764ms linear infinite; animation: fire 1643ms -764ms linear infinite; } @-webkit-keyframes spark98 { 0% { -webkit-transform: translateY(524px); transform: translateY(524px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(203deg) translateX(163px); transform: rotateZ(203deg) translateX(163px); } } @keyframes spark98 { 0% { -webkit-transform: translateY(524px); transform: translateY(524px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(203deg) translateX(163px); transform: rotateZ(203deg) translateX(163px); } } .line:nth-child(99) { -webkit-transform: rotateY(278deg); transform: rotateY(278deg); } .line:nth-child(99) .spark { -webkit-animation: spark99 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark99 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(99) .fire { -webkit-animation: fire 1005ms -80ms linear infinite; animation: fire 1005ms -80ms linear infinite; } @-webkit-keyframes spark99 { 0% { -webkit-transform: translateY(523px); transform: translateY(523px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(60deg) translateX(123px); transform: rotateZ(60deg) translateX(123px); } } @keyframes spark99 { 0% { -webkit-transform: translateY(523px); transform: translateY(523px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(60deg) translateX(123px); transform: rotateZ(60deg) translateX(123px); } } .line:nth-child(100) { -webkit-transform: rotateY(125deg); transform: rotateY(125deg); } .line:nth-child(100) .spark { -webkit-animation: spark100 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark100 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(100) .fire { -webkit-animation: fire 1308ms -820ms linear infinite; animation: fire 1308ms -820ms linear infinite; } @-webkit-keyframes spark100 { 0% { -webkit-transform: translateY(508px); transform: translateY(508px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(195deg) translateX(285px); transform: rotateZ(195deg) translateX(285px); } } @keyframes spark100 { 0% { -webkit-transform: translateY(508px); transform: translateY(508px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(195deg) translateX(285px); transform: rotateZ(195deg) translateX(285px); } } .line:nth-child(101) { -webkit-transform: rotateY(336deg); transform: rotateY(336deg); } .line:nth-child(101) .spark { -webkit-animation: spark101 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark101 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(101) .fire { -webkit-animation: fire 1779ms -673ms linear infinite; animation: fire 1779ms -673ms linear infinite; } @-webkit-keyframes spark101 { 0% { -webkit-transform: translateY(544px); transform: translateY(544px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(191deg) translateX(275px); transform: rotateZ(191deg) translateX(275px); } } @keyframes spark101 { 0% { -webkit-transform: translateY(544px); transform: translateY(544px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(191deg) translateX(275px); transform: rotateZ(191deg) translateX(275px); } } .line:nth-child(102) { -webkit-transform: rotateY(317deg); transform: rotateY(317deg); } .line:nth-child(102) .spark { -webkit-animation: spark102 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark102 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(102) .fire { -webkit-animation: fire 1688ms -763ms linear infinite; animation: fire 1688ms -763ms linear infinite; } @-webkit-keyframes spark102 { 0% { -webkit-transform: translateY(506px); transform: translateY(506px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(211deg) translateX(152px); transform: rotateZ(211deg) translateX(152px); } } @keyframes spark102 { 0% { -webkit-transform: translateY(506px); transform: translateY(506px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(211deg) translateX(152px); transform: rotateZ(211deg) translateX(152px); } } .line:nth-child(103) { -webkit-transform: rotateY(222deg); transform: rotateY(222deg); } .line:nth-child(103) .spark { -webkit-animation: spark103 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark103 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(103) .fire { -webkit-animation: fire 1771ms -304ms linear infinite; animation: fire 1771ms -304ms linear infinite; } @-webkit-keyframes spark103 { 0% { -webkit-transform: translateY(607px); transform: translateY(607px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(77deg) translateX(159px); transform: rotateZ(77deg) translateX(159px); } } @keyframes spark103 { 0% { -webkit-transform: translateY(607px); transform: translateY(607px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(77deg) translateX(159px); transform: rotateZ(77deg) translateX(159px); } } .line:nth-child(104) { -webkit-transform: rotateY(148deg); transform: rotateY(148deg); } .line:nth-child(104) .spark { -webkit-animation: spark104 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark104 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(104) .fire { -webkit-animation: fire 1203ms -325ms linear infinite; animation: fire 1203ms -325ms linear infinite; } @-webkit-keyframes spark104 { 0% { -webkit-transform: translateY(543px); transform: translateY(543px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(329deg) translateX(112px); transform: rotateZ(329deg) translateX(112px); } } @keyframes spark104 { 0% { -webkit-transform: translateY(543px); transform: translateY(543px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(329deg) translateX(112px); transform: rotateZ(329deg) translateX(112px); } } .line:nth-child(105) { -webkit-transform: rotateY(319deg); transform: rotateY(319deg); } .line:nth-child(105) .spark { -webkit-animation: spark105 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark105 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(105) .fire { -webkit-animation: fire 1804ms -334ms linear infinite; animation: fire 1804ms -334ms linear infinite; } @-webkit-keyframes spark105 { 0% { -webkit-transform: translateY(564px); transform: translateY(564px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(181deg) translateX(232px); transform: rotateZ(181deg) translateX(232px); } } @keyframes spark105 { 0% { -webkit-transform: translateY(564px); transform: translateY(564px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(181deg) translateX(232px); transform: rotateZ(181deg) translateX(232px); } } .line:nth-child(106) { -webkit-transform: rotateY(305deg); transform: rotateY(305deg); } .line:nth-child(106) .spark { -webkit-animation: spark106 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark106 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(106) .fire { -webkit-animation: fire 1669ms -608ms linear infinite; animation: fire 1669ms -608ms linear infinite; } @-webkit-keyframes spark106 { 0% { -webkit-transform: translateY(623px); transform: translateY(623px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(242deg) translateX(269px); transform: rotateZ(242deg) translateX(269px); } } @keyframes spark106 { 0% { -webkit-transform: translateY(623px); transform: translateY(623px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(242deg) translateX(269px); transform: rotateZ(242deg) translateX(269px); } } .line:nth-child(107) { -webkit-transform: rotateY(202deg); transform: rotateY(202deg); } .line:nth-child(107) .spark { -webkit-animation: spark107 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark107 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(107) .fire { -webkit-animation: fire 1048ms -747ms linear infinite; animation: fire 1048ms -747ms linear infinite; } @-webkit-keyframes spark107 { 0% { -webkit-transform: translateY(575px); transform: translateY(575px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(263deg) translateX(220px); transform: rotateZ(263deg) translateX(220px); } } @keyframes spark107 { 0% { -webkit-transform: translateY(575px); transform: translateY(575px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(263deg) translateX(220px); transform: rotateZ(263deg) translateX(220px); } } .line:nth-child(108) { -webkit-transform: rotateY(325deg); transform: rotateY(325deg); } .line:nth-child(108) .spark { -webkit-animation: spark108 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark108 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(108) .fire { -webkit-animation: fire 1721ms -671ms linear infinite; animation: fire 1721ms -671ms linear infinite; } @-webkit-keyframes spark108 { 0% { -webkit-transform: translateY(621px); transform: translateY(621px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(201deg) translateX(286px); transform: rotateZ(201deg) translateX(286px); } } @keyframes spark108 { 0% { -webkit-transform: translateY(621px); transform: translateY(621px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(201deg) translateX(286px); transform: rotateZ(201deg) translateX(286px); } } .line:nth-child(109) { -webkit-transform: rotateY(56deg); transform: rotateY(56deg); } .line:nth-child(109) .spark { -webkit-animation: spark109 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark109 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(109) .fire { -webkit-animation: fire 1811ms -638ms linear infinite; animation: fire 1811ms -638ms linear infinite; } @-webkit-keyframes spark109 { 0% { -webkit-transform: translateY(647px); transform: translateY(647px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(1deg) translateX(229px); transform: rotateZ(1deg) translateX(229px); } } @keyframes spark109 { 0% { -webkit-transform: translateY(647px); transform: translateY(647px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(1deg) translateX(229px); transform: rotateZ(1deg) translateX(229px); } } .line:nth-child(110) { -webkit-transform: rotateY(103deg); transform: rotateY(103deg); } .line:nth-child(110) .spark { -webkit-animation: spark110 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark110 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(110) .fire { -webkit-animation: fire 1505ms -492ms linear infinite; animation: fire 1505ms -492ms linear infinite; } @-webkit-keyframes spark110 { 0% { -webkit-transform: translateY(527px); transform: translateY(527px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(121deg) translateX(255px); transform: rotateZ(121deg) translateX(255px); } } @keyframes spark110 { 0% { -webkit-transform: translateY(527px); transform: translateY(527px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(121deg) translateX(255px); transform: rotateZ(121deg) translateX(255px); } } .line:nth-child(111) { -webkit-transform: rotateY(83deg); transform: rotateY(83deg); } .line:nth-child(111) .spark { -webkit-animation: spark111 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark111 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(111) .fire { -webkit-animation: fire 1213ms -438ms linear infinite; animation: fire 1213ms -438ms linear infinite; } @-webkit-keyframes spark111 { 0% { -webkit-transform: translateY(610px); transform: translateY(610px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(50deg) translateX(139px); transform: rotateZ(50deg) translateX(139px); } } @keyframes spark111 { 0% { -webkit-transform: translateY(610px); transform: translateY(610px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(50deg) translateX(139px); transform: rotateZ(50deg) translateX(139px); } } .line:nth-child(112) { -webkit-transform: rotateY(287deg); transform: rotateY(287deg); } .line:nth-child(112) .spark { -webkit-animation: spark112 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark112 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(112) .fire { -webkit-animation: fire 1307ms -677ms linear infinite; animation: fire 1307ms -677ms linear infinite; } @-webkit-keyframes spark112 { 0% { -webkit-transform: translateY(595px); transform: translateY(595px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(9deg) translateX(247px); transform: rotateZ(9deg) translateX(247px); } } @keyframes spark112 { 0% { -webkit-transform: translateY(595px); transform: translateY(595px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(9deg) translateX(247px); transform: rotateZ(9deg) translateX(247px); } } .line:nth-child(113) { -webkit-transform: rotateY(190deg); transform: rotateY(190deg); } .line:nth-child(113) .spark { -webkit-animation: spark113 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark113 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(113) .fire { -webkit-animation: fire 1708ms -696ms linear infinite; animation: fire 1708ms -696ms linear infinite; } @-webkit-keyframes spark113 { 0% { -webkit-transform: translateY(552px); transform: translateY(552px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(67deg) translateX(209px); transform: rotateZ(67deg) translateX(209px); } } @keyframes spark113 { 0% { -webkit-transform: translateY(552px); transform: translateY(552px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(67deg) translateX(209px); transform: rotateZ(67deg) translateX(209px); } } .line:nth-child(114) { -webkit-transform: rotateY(60deg); transform: rotateY(60deg); } .line:nth-child(114) .spark { -webkit-animation: spark114 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark114 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(114) .fire { -webkit-animation: fire 1216ms -810ms linear infinite; animation: fire 1216ms -810ms linear infinite; } @-webkit-keyframes spark114 { 0% { -webkit-transform: translateY(546px); transform: translateY(546px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(180deg) translateX(211px); transform: rotateZ(180deg) translateX(211px); } } @keyframes spark114 { 0% { -webkit-transform: translateY(546px); transform: translateY(546px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(180deg) translateX(211px); transform: rotateZ(180deg) translateX(211px); } } .line:nth-child(115) { -webkit-transform: rotateY(241deg); transform: rotateY(241deg); } .line:nth-child(115) .spark { -webkit-animation: spark115 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark115 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(115) .fire { -webkit-animation: fire 1960ms -821ms linear infinite; animation: fire 1960ms -821ms linear infinite; } @-webkit-keyframes spark115 { 0% { -webkit-transform: translateY(600px); transform: translateY(600px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(24deg) translateX(186px); transform: rotateZ(24deg) translateX(186px); } } @keyframes spark115 { 0% { -webkit-transform: translateY(600px); transform: translateY(600px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(24deg) translateX(186px); transform: rotateZ(24deg) translateX(186px); } } .line:nth-child(116) { -webkit-transform: rotateY(54deg); transform: rotateY(54deg); } .line:nth-child(116) .spark { -webkit-animation: spark116 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark116 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(116) .fire { -webkit-animation: fire 1610ms -551ms linear infinite; animation: fire 1610ms -551ms linear infinite; } @-webkit-keyframes spark116 { 0% { -webkit-transform: translateY(603px); transform: translateY(603px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(260deg) translateX(179px); transform: rotateZ(260deg) translateX(179px); } } @keyframes spark116 { 0% { -webkit-transform: translateY(603px); transform: translateY(603px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(260deg) translateX(179px); transform: rotateZ(260deg) translateX(179px); } } .line:nth-child(117) { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .line:nth-child(117) .spark { -webkit-animation: spark117 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark117 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(117) .fire { -webkit-animation: fire 1717ms -778ms linear infinite; animation: fire 1717ms -778ms linear infinite; } @-webkit-keyframes spark117 { 0% { -webkit-transform: translateY(513px); transform: translateY(513px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(33deg) translateX(192px); transform: rotateZ(33deg) translateX(192px); } } @keyframes spark117 { 0% { -webkit-transform: translateY(513px); transform: translateY(513px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(33deg) translateX(192px); transform: rotateZ(33deg) translateX(192px); } } .line:nth-child(118) { -webkit-transform: rotateY(107deg); transform: rotateY(107deg); } .line:nth-child(118) .spark { -webkit-animation: spark118 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark118 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(118) .fire { -webkit-animation: fire 1975ms -448ms linear infinite; animation: fire 1975ms -448ms linear infinite; } @-webkit-keyframes spark118 { 0% { -webkit-transform: translateY(558px); transform: translateY(558px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(299deg) translateX(235px); transform: rotateZ(299deg) translateX(235px); } } @keyframes spark118 { 0% { -webkit-transform: translateY(558px); transform: translateY(558px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(299deg) translateX(235px); transform: rotateZ(299deg) translateX(235px); } } .line:nth-child(119) { -webkit-transform: rotateY(207deg); transform: rotateY(207deg); } .line:nth-child(119) .spark { -webkit-animation: spark119 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark119 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(119) .fire { -webkit-animation: fire 1868ms -157ms linear infinite; animation: fire 1868ms -157ms linear infinite; } @-webkit-keyframes spark119 { 0% { -webkit-transform: translateY(601px); transform: translateY(601px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(308deg) translateX(285px); transform: rotateZ(308deg) translateX(285px); } } @keyframes spark119 { 0% { -webkit-transform: translateY(601px); transform: translateY(601px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(308deg) translateX(285px); transform: rotateZ(308deg) translateX(285px); } } .line:nth-child(120) { -webkit-transform: rotateY(356deg); transform: rotateY(356deg); } .line:nth-child(120) .spark { -webkit-animation: spark120 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark120 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(120) .fire { -webkit-animation: fire 1413ms -579ms linear infinite; animation: fire 1413ms -579ms linear infinite; } @-webkit-keyframes spark120 { 0% { -webkit-transform: translateY(513px); transform: translateY(513px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(200deg) translateX(296px); transform: rotateZ(200deg) translateX(296px); } } @keyframes spark120 { 0% { -webkit-transform: translateY(513px); transform: translateY(513px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(200deg) translateX(296px); transform: rotateZ(200deg) translateX(296px); } } .line:nth-child(121) { -webkit-transform: rotateY(65deg); transform: rotateY(65deg); } .line:nth-child(121) .spark { -webkit-animation: spark121 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark121 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(121) .fire { -webkit-animation: fire 1346ms -853ms linear infinite; animation: fire 1346ms -853ms linear infinite; } @-webkit-keyframes spark121 { 0% { -webkit-transform: translateY(626px); transform: translateY(626px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(323deg) translateX(139px); transform: rotateZ(323deg) translateX(139px); } } @keyframes spark121 { 0% { -webkit-transform: translateY(626px); transform: translateY(626px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(323deg) translateX(139px); transform: rotateZ(323deg) translateX(139px); } } .line:nth-child(122) { -webkit-transform: rotateY(325deg); transform: rotateY(325deg); } .line:nth-child(122) .spark { -webkit-animation: spark122 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark122 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(122) .fire { -webkit-animation: fire 1250ms -779ms linear infinite; animation: fire 1250ms -779ms linear infinite; } @-webkit-keyframes spark122 { 0% { -webkit-transform: translateY(608px); transform: translateY(608px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(143deg) translateX(297px); transform: rotateZ(143deg) translateX(297px); } } @keyframes spark122 { 0% { -webkit-transform: translateY(608px); transform: translateY(608px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(143deg) translateX(297px); transform: rotateZ(143deg) translateX(297px); } } .line:nth-child(123) { -webkit-transform: rotateY(35deg); transform: rotateY(35deg); } .line:nth-child(123) .spark { -webkit-animation: spark123 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark123 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(123) .fire { -webkit-animation: fire 1870ms -592ms linear infinite; animation: fire 1870ms -592ms linear infinite; } @-webkit-keyframes spark123 { 0% { -webkit-transform: translateY(640px); transform: translateY(640px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(309deg) translateX(101px); transform: rotateZ(309deg) translateX(101px); } } @keyframes spark123 { 0% { -webkit-transform: translateY(640px); transform: translateY(640px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(309deg) translateX(101px); transform: rotateZ(309deg) translateX(101px); } } .line:nth-child(124) { -webkit-transform: rotateY(8deg); transform: rotateY(8deg); } .line:nth-child(124) .spark { -webkit-animation: spark124 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark124 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(124) .fire { -webkit-animation: fire 1513ms -61ms linear infinite; animation: fire 1513ms -61ms linear infinite; } @-webkit-keyframes spark124 { 0% { -webkit-transform: translateY(617px); transform: translateY(617px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(321deg) translateX(268px); transform: rotateZ(321deg) translateX(268px); } } @keyframes spark124 { 0% { -webkit-transform: translateY(617px); transform: translateY(617px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(321deg) translateX(268px); transform: rotateZ(321deg) translateX(268px); } } .line:nth-child(125) { -webkit-transform: rotateY(68deg); transform: rotateY(68deg); } .line:nth-child(125) .spark { -webkit-animation: spark125 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark125 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(125) .fire { -webkit-animation: fire 1512ms -571ms linear infinite; animation: fire 1512ms -571ms linear infinite; } @-webkit-keyframes spark125 { 0% { -webkit-transform: translateY(515px); transform: translateY(515px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(348deg) translateX(175px); transform: rotateZ(348deg) translateX(175px); } } @keyframes spark125 { 0% { -webkit-transform: translateY(515px); transform: translateY(515px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(348deg) translateX(175px); transform: rotateZ(348deg) translateX(175px); } } .line:nth-child(126) { -webkit-transform: rotateY(296deg); transform: rotateY(296deg); } .line:nth-child(126) .spark { -webkit-animation: spark126 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark126 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(126) .fire { -webkit-animation: fire 1907ms -919ms linear infinite; animation: fire 1907ms -919ms linear infinite; } @-webkit-keyframes spark126 { 0% { -webkit-transform: translateY(575px); transform: translateY(575px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(292deg) translateX(180px); transform: rotateZ(292deg) translateX(180px); } } @keyframes spark126 { 0% { -webkit-transform: translateY(575px); transform: translateY(575px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(292deg) translateX(180px); transform: rotateZ(292deg) translateX(180px); } } .line:nth-child(127) { -webkit-transform: rotateY(329deg); transform: rotateY(329deg); } .line:nth-child(127) .spark { -webkit-animation: spark127 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark127 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(127) .fire { -webkit-animation: fire 1122ms -204ms linear infinite; animation: fire 1122ms -204ms linear infinite; } @-webkit-keyframes spark127 { 0% { -webkit-transform: translateY(637px); transform: translateY(637px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(345deg) translateX(277px); transform: rotateZ(345deg) translateX(277px); } } @keyframes spark127 { 0% { -webkit-transform: translateY(637px); transform: translateY(637px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(345deg) translateX(277px); transform: rotateZ(345deg) translateX(277px); } } .line:nth-child(128) { -webkit-transform: rotateY(95deg); transform: rotateY(95deg); } .line:nth-child(128) .spark { -webkit-animation: spark128 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; animation: spark128 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite; } .line:nth-child(128) .fire { -webkit-animation: fire 1475ms -113ms linear infinite; animation: fire 1475ms -113ms linear infinite; } @-webkit-keyframes spark128 { 0% { -webkit-transform: translateY(562px); transform: translateY(562px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(127deg) translateX(147px); transform: rotateZ(127deg) translateX(147px); } } @keyframes spark128 { 0% { -webkit-transform: translateY(562px); transform: translateY(562px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: rotateZ(127deg) translateX(147px); transform: rotateZ(.........完整代码请登录后点击上方下载按钮下载查看
网友评论0