CSS
html, body {
height: 100vh;
overflow: hidden;
margin: 0;
padding: 0;
background: tomato;
}
.starburst {
min-width: 100vw;
min-height: 100vh;
margin-top: -5vh;
overflow: visible;
display: block;
position: absolute;
background: url(http://i.imgur.com/Hr5GNHH.png) no-repeat;
background-size: 20%;
background-position: center;
transform-origin: center;
animation: turn 40s linear infinite;
}
.bigCube {
width: 100vw;
height: 90vh;
display: block;
position: absolute;
vertical-align: middle;
padding: 0;
margin: 0 auto;
background: url(http://i.imgur.com/qKEKI8d.png) no-repeat;
background-position: center;
transition: 1s;
background-size: auto 40%;
animation: unblur 1s linear 1;
}
.littleCube {
width: 100vw;
height: 90vh;
display: block;
position: absolute;
vertical-align: middle;
padding: 0;
background: url(http://i.imgur.com/wdb2aU7.png) no-repeat;
background-position: center;
background-size: auto 21%;
transition: 2s;
animation: unblur 2s linear 1;
animation: hueturn 4s infinite;
}
@keyframes turn {
from { transform: rotate(0deg); }
to { transform: rotate(359deg); }
}
@keyframes hueturn {
from { filter: hue-rotate(0deg); }
to { filter: hue-rotate(359deg); }
}
@keyframes unblur {
from { filter: blur(10px); }
to { filter: blur(0); }
}
