.animation-container{display:block;position:relative;width:800px;max-width:100%;margin:0 auto;.lightning-container{position:absolute;top:50%;left:0;display:flex;transform:translateY(-50%);.lightning{position:absolute;display:block;height:12px;width:12px;border-radius:12px;transform-origin:6px 6px;animation-name:woosh;animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.445,.05,.55,.95);animation-direction:alternate;&.white{background-color:#fff;box-shadow:0 50px 50px 0 transparentize(#fff,.7)}&.red{background-color:#fc7171;box-shadow:0 50px 50px 0 transparentize(#fc7171,.7);animation-delay:.2s}}}.boom-container{position:absolute;display:flex;width:80px;height:80px;text-align:center;align-items:center;transform:translateY(-50%);left:200px;top:-145px;.shape{display:inline-block;position:relative;opacity:0;transform-origin:center center;&.triangle{width:0;height:0;transform-origin:50% 80%;animation-duration:1s;animation-timing-function:ease-out;animation-iteration-count:infinite;margin-left:-15px;border-color:transparent transparent #42e599;border-style:solid;border-width:0 2.5px 5px;animation-name:boom-triangle;&.big{margin-left:-25px;border-width:0 5px 10px;border-color:transparent transparent #fade28;animation-name:boom-triangle-big}}&.disc{width:8px;height:8px;background-color:#d15ff4;animation-name:boom-disc;animation-timing-function:ease-out;animation-iteration-count:infinite}&.circle,&.disc{border-radius:100%;animation-duration:1s}&.circle{width:20px;height:20px;animation-name:boom-circle;animation-timing-function:ease-out;animation-iteration-count:infinite;margin-left:-30px;&.white{border:1px solid #fff}&.big{width:40px;height:40px;margin-left:0;&.white{border:2px solid #fff}}}&:after{background-color:rgba(178,215,232,.2)}}.shape{&.circle,&.circle.big,&.disc,&.triangle{animation-delay:.38s;animation-duration:3s}&.circle{animation-delay:.6s}}&.second{left:485px;top:155px;.shape{&.circle,&.circle.big,&.disc,&.triangle{animation-delay:1.9s}&.circle{animation-delay:2.15s}}}}}@keyframes woosh{0%{width:12px;transform:translate(0) rotate(-35deg)}15%{width:50px}30%{width:12px;transform:translate(214px,-150px) rotate(-35deg)}30.1%{transform:translate(214px,-150px) rotate(46deg)}50%{width:110px}70%{width:12px;transform:translate(500px,150px) rotate(46deg)}70.1%{transform:translate(500px,150px) rotate(-37deg)}85%{width:50px}to{width:12px;transform:translate(700px) rotate(-37deg)}}@keyframes boom-circle{0%{opacity:0}5%{opacity:1}30%{opacity:0;transform:scale(3)}}@keyframes boom-triangle-big{0%{opacity:0}5%{opacity:1}40%{opacity:0;transform:scale(2.5) translate(50px,-50px) rotate(1turn)}}@keyframes boom-triangle{0%{opacity:0}5%{opacity:1}30%{opacity:0;transform:scale(3) translate(20px,40px) rotate(1turn)}}@keyframes boom-disc{0%{opacity:0}5%{opacity:1}40%{opacity:0;transform:scale(2) translate(-70px,-30px)}}