Edit in JSFiddle

<div class="background">
    <div class="sun"></div>
    <div class="rectangle"></div>
</div>
.background { 
    background-color: blue; 
    width: 650px;
    animation: background 5s infinite; /* CSS3 */
    -moz-animation: background 5s infinite; /* Firefox */
    -webkit-animation: background 5s infinite; /* Webkit */
} 

@keyframes background { /* CSS3 */
    0%, 100% {top:0px; bottom:0px; background:blue;}
    50% {top:500px; left:0px; background:black;}
} 

@-moz-keyframes background { /* Firefox */
    0%, 100% {top:0px; bottom:0px; background:blue;}
    50% {top:500px; left:0px; background:black;}
}

@-webkit-keyframes background { /* Webkit */
    0%, 100% {top:0px; bottom:0px; background:blue;}
    50% {top:500px; left:0px; background:black;}
}

.sun {
    width: 80px;
    height: 80px; 
    -moz-border-radius: 50px; 
    -webkit-border-radius: 50px; 
    border-radius: 50px;
    animation: move 5s infinite; /* CSS3 */
    -moz-animation: move 5s infinite; /* Firefox */
    -webkit-animation: move 5s infinite; /* Webkit */
    position:relative; 
    margin-left: 40px;
}

@keyframes move { /* CSS3 */
    0%, 100% {top:0px; bottom:0px; background:yellow;}
    50% {top:400px; left:0px; background:yellow;}
}

@-moz-keyframes move { /* Firefox */
    0%, 100% {top:0px; bottom:0px; background:yellow;}
    50% {top:400px; left:0px; background:yellow;} 
} 

@-webkit-keyframes move { /* Webkit */
    0%, 100% {top:0px; bottom:0px; background:yellow;}
    50% {top:400px; left:0px; background:yellow;}
} 

.rectangle { 
    width: 650px; 
    height: 100px; 
    background: green; 
    position: relative; 
    margin-top: 300px;
}