CSS
.logo {
background: url("http://splash.soundstr.com/hubfs/Soundstr%20Logos%20(SVG)/Soundstr_Logos_Wide.svg") no-repeat 50%/70%;
width: 200px;
height: 110px;
position: absolute;
animation-name: fadeIn;
animation-duration: 3s;
top:1;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.starticon {
background: url("http://splash.soundstr.com/hubfs/Soundstr%20Logos%20(SVG)/startup-icon.svg") no-repeat 50%/70%;
width: 200px;
height: 200px;
position: absolute;
z-index:1000;
animation: pulse 5s infinite;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.logo2 {
background: url("http://splash.soundstr.com/hubfs/Soundstr%20Logos%20(SVG)/Soundstr_Logos_Wide.svg") no-repeat 50%/70%;
width: 200px;
height: 110px;
position: absolute;
animation-name: delayfade;
animation-duration: 4s;
top:0;
bottom: 1;
left: 0;
right: 0;
margin: auto;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes delayfade {
0% {opacity: 0}
25% {opacity: 1}
50% {opacity: 1}
75% {opacity: 1}
100% {opacity: 0}
}
@keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
body { background: #0f222b; }
