.pyro > .before, .pyro > .after {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
-moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
-webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
-o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
-ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}
.pyro > .after {
-moz-animation-delay: 1.25s, 1.25s, 1.25s;
-webkit-animation-delay: 1.25s, 1.25s, 1.25s;
-o-animation-delay: 1.25s, 1.25s, 1.25s;
-ms-animation-delay: 1.25s, 1.25s, 1.25s;
animation-delay: 1.25s, 1.25s, 1.25s;
-moz-animation-duration: 1.25s, 1.25s, 6.25s;
-webkit-animation-duration: 1.25s, 1.25s, 6.25s;
-o-animation-duration: 1.25s, 1.25s, 6.25s;
-ms-animation-duration: 1.25s, 1.25s, 6.25s;
animation-duration: 1.25s, 1.25s, 6.25s;
}
@-webkit-keyframes bang {
to {
box-shadow: 72px -388.6666666667px #ff003c, 134px -201.6666666667px #0084ff, -180px -192.6666666667px #ff9500, -62px -8.6666666667px #00ffc8, -89px -35.6666666667px #ffd000, 250px -308.6666666667px #ff00e6, 170px 53.3333333333px #00ff1e, 241px -229.6666666667px #d900ff, -88px -374.6666666667px #33ff00, 29px -184.6666666667px #b300ff, -99px -370.6666666667px #00ffae, 18px -270.6666666667px #ff4400, -3px -274.6666666667px #ff0066, -56px -195.6666666667px #ffb300, 215px -384.6666666667px #66ff00, 186px -354.6666666667px #00a6ff, 238px -165.6666666667px #fffb00, -210px -134.6666666667px #ff00e1, -183px -409.6666666667px #ff0033, -153px 6.3333333333px #00c4ff, 248px -355.6666666667px #4400ff, -241px -137.6666666667px #ff5900, 37px -170.6666666667px #6600ff, 193px 65.3333333333px #0055ff, 181px -185.6666666667px #0080ff, 249px -371.6666666667px yellow, -165px -387.6666666667px #ffdd00, 111px -248.6666666667px #00ff55, 249px -94.6666666667px #00ffc8, -26px -16.6666666667px #b300ff, 117px -63.6666666667px #3300ff, 46px -80.6666666667px #37ff00, 17px -291.6666666667px #ff00d0, 103px -88.6666666667px #00ffd9, 73px -130.6666666667px #00ff44, -85px -219.6666666667px #c400ff, -66px -372.6666666667px #00ffd5, 40px -311.6666666667px #00ffea, -26px -326.6666666667px #ff0080, -201px -185.6666666667px #2600ff, -109px -51.6666666667px #8c00ff, 45px -141.6666666667px #00ffd5, 146px 72.3333333333px #a6ff00, -17px -117.6666666667px #44ff00, 49px -38.6666666667px #8000ff, -40px 54.3333333333px #ff6a00, -200px 73.3333333333px #ff9900, 148px -180.6666666667px #ff2b00, 154px -77.6666666667px #a2ff00, 157px -294.6666666667px #ff0091, -19px -180.6666666667px #62ff00;
}
}
@-moz-keyframes bang {
to {
box-shadow: 72px -388.6666666667px #ff003c, 134px -201.6666666667px #0084ff, -180px -192.6666666667px #ff9500, -62px -8.6666666667px #00ffc8, -89px -35.6666666667px #ffd000, 250px -308.6666666667px #ff00e6, 170px 53.3333333333px #00ff1e, 241px -229.6666666667px #d900ff, -88px -374.6666666667px #33ff00, 29px -184.6666666667px #b300ff, -99px -370.6666666667px #00ffae, 18px -270.6666666667px #ff4400, -3px -274.6666666667px #ff0066, -56px -195.6666666667px #ffb300, 215px -384.6666666667px #66ff00, 186px -354.6666666667px #00a6ff, 238px -165.6666666667px #fffb00, -210px -134.6666666667px #ff00e1, -183px -409.6666666667px #ff0033, -153px 6.3333333333px #00c4ff, 248px -355.6666666667px #4400ff, -241px -137.6666666667px #ff5900, 37px -170.6666666667px #6600ff, 193px 65.3333333333px #0055ff, 181px -185.6666666667px #0080ff, 249px -371.6666666667px yellow, -165px -387.6666666667px #ffdd00, 111px -248.6666666667px #00ff55, 249px -94.6666666667px #00ffc8, -26px -16.6666666667px #b300ff, 117px -63.6666666667px #3300ff, 46px -80.6666666667px #37ff00, 17px -291.6666666667px #ff00d0, 103px -88.6666666667px #00ffd9, 73px -130.6666666667px #00ff44, -85px -219.6666666667px #c400ff, -66px -372.6666666667px #00ffd5, 40px -311.6666666667px #00ffea, -26px -326.6666666667px #ff0080, -201px -185.6666666667px #2600ff, -109px -51.6666666667px #8c00ff, 45px -141.6666666667px #00ffd5, 146px 72.3333333333px #a6ff00, -17px -117.6666666667px #44ff00, 49px -38.6666666667px #8000ff, -40px 54.3333333333px #ff6a00, -200px 73.3333333333px #ff9900, 148px -180.6666666667px #ff2b00, 154px -77.6666666667px #a2ff00, 157px -294.6666666667px #ff0091, -19px -180.6666666667px #62ff00;
}
}
@-o-keyframes bang {
to {
box-shadow: 72px -388.6666666667px #ff003c, 134px -201.6666666667px #0084ff, -180px -192.6666666667px #ff9500, -62px -8.6666666667px #00ffc8, -89px -35.6666666667px #ffd000, 250px -308.6666666667px #ff00e6, 170px 53.3333333333px #00ff1e, 241px -229.6666666667px #d900ff, -88px -374.6666666667px #33ff00, 29px -184.6666666667px #b300ff, -99px -370.6666666667px #00ffae, 18px -270.6666666667px #ff4400, -3px -274.6666666667px #ff0066, -56px -195.6666666667px #ffb300, 215px -384.6666666667px #66ff00, 186px -354.6666666667px #00a6ff, 238px -165.6666666667px #fffb00, -210px -134.6666666667px #ff00e1, -183px -409.6666666667px #ff0033, -153px 6.3333333333px #00c4ff, 248px -355.6666666667px #4400ff, -241px -137.6666666667px #ff5900, 37px -170.6666666667px #6600ff, 193px 65.3333333333px #0055ff, 181px -185.6666666667px #0080ff, 249px -371.6666666667px yellow, -165px -387.6666666667px #ffdd00, 111px -248.6666666667px #00ff55, 249px -94.6666666667px #00ffc8, -26px -16.6666666667px #b300ff, 117px -63.6666666667px #3300ff, 46px -80.6666666667px #37ff00, 17px -291.6666666667px #ff00d0, 103px -88.6666666667px #00ffd9, 73px -130.6666666667px #00ff44, -85px -219.6666666667px #c400ff, -66px -372.6666666667px #00ffd5, 40px -311.6666666667px #00ffea, -26px -326.6666666667px #ff0080, -201px -185.6666666667px #2600ff, -109px -51.6666666667px #8c00ff, 45px -141.6666666667px #00ffd5, 146px 72.3333333333px #a6ff00, -17px -117.6666666667px #44ff00, 49px -38.6666666667px #8000ff, -40px 54.3333333333px #ff6a00, -200px 73.3333333333px #ff9900, 148px -180.6666666667px #ff2b00, 154px -77.6666666667px #a2ff00, 157px -294.6666666667px #ff0091, -19px -180.6666666667px #62ff00;
}
}
@-ms-keyframes bang {
to {
box-shadow: 72px -388.6666666667px #ff003c, 134px -201.6666666667px #0084ff, -180px -192.6666666667px #ff9500, -62px -8.6666666667px #00ffc8, -89px -35.6666666667px #ffd000, 250px -308.6666666667px #ff00e6, 170px 53.3333333333px #00ff1e, 241px -229.6666666667px #d900ff, -88px -374.6666666667px #33ff00, 29px -184.6666666667px #b300ff, -99px -370.6666666667px #00ffae, 18px -270.6666666667px #ff4400, -3px -274.6666666667px #ff0066, -56px -195.6666666667px #ffb300, 215px -384.6666666667px #66ff00, 186px -354.6666666667px #00a6ff, 238px -165.6666666667px #fffb00, -210px -134.6666666667px #ff00e1, -183px -409.6666666667px #ff0033, -153px 6.3333333333px #00c4ff, 248px -355.6666666667px #4400ff, -241px -137.6666666667px #ff5900, 37px -170.6666666667px #6600ff, 193px 65.3333333333px #0055ff, 181px -185.6666666667px #0080ff, 249px -371.6666666667px yellow, -165px -387.6666666667px #ffdd00, 111px -248.6666666667px #00ff55, 249px -94.6666666667px #00ffc8, -26px -16.6666666667px #b300ff, 117px -63.6666666667px #3300ff, 46px -80.6666666667px #37ff00, 17px -291.6666666667px #ff00d0, 103px -88.6666666667px #00ffd9, 73px -130.6666666667px #00ff44, -85px -219.6666666667px #c400ff, -66px -372.6666666667px #00ffd5, 40px -311.6666666667px #00ffea, -26px -326.6666666667px #ff0080, -201px -185.6666666667px #2600ff, -109px -51.6666666667px #8c00ff, 45px -141.6666666667px #00ffd5, 146px 72.3333333333px #a6ff00, -17px -117.6666666667px #44ff00, 49px -38.6666666667px #8000ff, -40px 54.3333333333px #ff6a00, -200px 73.3333333333px #ff9900, 148px -180.6666666667px #ff2b00, 154px -77.6666666667px #a2ff00, 157px -294.6666666667px #ff0091, -19px -180.6666666667px #62ff00;
}
}
@keyframes bang {
to {
box-shadow: 72px -388.6666666667px #ff003c, 134px -201.6666666667px #0084ff, -180px -192.6666666667px #ff9500, -62px -8.6666666667px #00ffc8, -89px -35.6666666667px #ffd000, 250px -308.6666666667px #ff00e6, 170px 53.3333333333px #00ff1e, 241px -229.6666666667px #d900ff, -88px -374.6666666667px #33ff00, 29px -184.6666666667px #b300ff, -99px -370.6666666667px #00ffae, 18px -270.6666666667px #ff4400, -3px -274.6666666667px #ff0066, -56px -195.6666666667px #ffb300, 215px -384.6666666667px #66ff00, 186px -354.6666666667px #00a6ff, 238px -165.6666666667px #fffb00, -210px -134.6666666667px #ff00e1, -183px -409.6666666667px #ff0033, -153px 6.3333333333px #00c4ff, 248px -355.6666666667px #4400ff, -241px -137.6666666667px #ff5900, 37px -170.6666666667px #6600ff, 193px 65.3333333333px #0055ff, 181px -185.6666666667px #0080ff, 249px -371.6666666667px yellow, -165px -387.6666666667px #ffdd00, 111px -248.6666666667px #00ff55, 249px -94.6666666667px #00ffc8, -26px -16.6666666667px #b300ff, 117px -63.6666666667px #3300ff, 46px -80.6666666667px #37ff00, 17px -291.6666666667px #ff00d0, 103px -88.6666666667px #00ffd9, 73px -130.6666666667px #00ff44, -85px -219.6666666667px #c400ff, -66px -372.6666666667px #00ffd5, 40px -311.6666666667px #00ffea, -26px -326.6666666667px #ff0080, -201px -185.6666666667px #2600ff, -109px -51.6666666667px #8c00ff, 45px -141.6666666667px #00ffd5, 146px 72.3333333333px #a6ff00, -17px -117.6666666667px #44ff00, 49px -38.6666666667px #8000ff, -40px 54.3333333333px #ff6a00, -200px 73.3333333333px #ff9900, 148px -180.6666666667px #ff2b00, 154px -77.6666666667px #a2ff00, 157px -294.6666666667px #ff0091, -19px -180.6666666667px #62ff00;
}
}
@-webkit-keyframes gravity {
to {
transform: translateY(200px);
-moz-transform: translateY(200px);
-webkit-transform: translateY(200px);
-o-transform: translateY(200px);
-ms-transform: translateY(200px);
opacity: 0;
}
}
@-moz-keyframes gravity {
to {
transform: translateY(200px);
-moz-transform: translateY(200px);
-webkit-transform: translateY(200px);
-o-transform: translateY(200px);
-ms-transform: translateY(200px);
opacity: 0;
}
}
@-o-keyframes gravity {
to {
transform: translateY(200px);
-moz-transform: translateY(200px);
-webkit-transform: translateY(200px);
-o-transform: translateY(200px);
-ms-transform: translateY(200px);
opacity: 0;
}
}
@-ms-keyframes gravity {
to {
transform: translateY(200px);
-moz-transform: translateY(200px);
-webkit-transform: translateY(200px);
-o-transform: translateY(200px);
-ms-transform: translateY(200px);
opacity: 0;
}
}
@keyframes gravity {
to {
transform: translateY(200px);
-moz-transform: translateY(200px);
-webkit-transform: translateY(200px);
-o-transform: translateY(200px);
-ms-transform: translateY(200px);
opacity: 0;
}
}
@-webkit-keyframes position {
0%, 19.9% {
margin-top: 10%;
margin-left: 40%;
}
20%, 39.9% {
margin-top: 40%;
margin-left: 30%;
}
40%, 59.9% {
margin-top: 20%;
margin-left: 70%;
}
60%, 79.9% {
margin-top: 30%;
margin-left: 20%;
}
80%, 99.9% {
margin-top: 30%;
margin-left: 80%;
}
}
@-moz-keyframes position {
0%, 19.9% {
margin-top: 10%;
margin-left: 40%;
}
20%, 39.9% {
margin-top: 40%;
margin-left: 30%;
}
40%, 59.9% {
margin-top: 20%;
margin-left: 70%;
}
60%, 79.9% {
margin-top: 30%;
margin-left: 20%;
}
80%, 99.9% {
margin-top: 30%;
margin-left: 80%;
}
}
@-o-keyframes position {
0%, 19.9% {
margin-top: 10%;
margin-left: 40%;
}
20%, 39.9% {
margin-top: 40%;
margin-left: 30%;
}
40%, 59.9% {
margin-top: 20%;
margin-left: 70%;
}
60%, 79.9% {
margin-top: 30%;
margin-left: 20%;
}
80%, 99.9% {
margin-top: 30%;
margin-left: 80%;
}
}
@-ms-keyframes position {
0%, 19.9% {
margin-top: 10%;
margin-left: 40%;
}
20%, 39.9% {
margin-top: 40%;
margin-left: 30%;
}
40%, 59.9% {
margin-top: 20%;
margin-left: 70%;
}
60%, 79.9% {
margin-top: 30%;
margin-left: 20%;
}
80%, 99.9% {
margin-top: 30%;
margin-left: 80%;
}
}
@keyframes position {
0%, 19.9% {
margin-top: 10%;
margin-left: 40%;
}
20%, 39.9% {
margin-top: 40%;
margin-left: 30%;
}
40%, 59.9% {
margin-top: 20%;
margin-left: 70%;
}
60%, 79.9% {
margin-top: 30%;
margin-left: 20%;
}
80%, 99.9% {
margin-top: 30%;
margin-left: 80%;
}
}
I LOVE This!!! Big Props!!
-Trainwreq