Applying 'position: absolute' to '.starfield' and 'overflow: hidden' to 'body' (or its parent).</p>
<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>body, html {
display: block;
width: 100%;
height: 100%;
background: #000;
}
body {
overflow: hidden;
}
.starfield {
position: absolute;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
-webkit-animation: fadein 15s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 15s; /* Firefox < 16 */
-ms-animation: fadein 15s; /* Internet Explorer */
-o-animation: fadein 15s; /* Opera < 12.1 */
animation: fadein 15s;
}
.starfield > * {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.starfield > * {
background-size: 200px 200px;
background-image: radial-gradient(2px 2px at 40px 60px, #ccc, rgba(0,0,0,0)),
radial-gradient(2px 2px at 20px 50px, #ddd, rgba(0,0,0,0)),
radial-gradient(2px 2px at 30px 100px, #eee, rgba(0,0,0,0)),
radial-gradient(2px 2px at 40px 60px, #fff, rgba(0,0,0,0)),
radial-gradient(2px 2px at 110px 90px, #ccc, rgba(0,0,0,0)),
radial-gradient(2px 2px at 190px 150px, #ddd, rgba(0,0,0,0));
background-repeat: repeat;
}
.starfield > * {
transform-origin: 50% 50%;
animation-name: starfieldRotate;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.starfield > *:nth-child(1){
animation-duration: 25s;
animation-delay: -15;
}
.starfield > *:nth-child(2){
animation-duration: 35s;
animation-delay: -50s;
}
.starfield > *:nth-child(3){
animation-duration: 50s;
}
.starfield > *:nth-child(4){
animation-duration: 70s;
}
.starfield > *:nth-child(5){
animation-duration: 120s;
}
@keyframes starfieldRotate {
from {transform:rotate(0deg);}
to {transform: rotate(360deg);}
}
<div class="starfield">
<span></span>
<span></span>
<span></span>
<span></span>
</div>