Закат

HTML


        <div id="fon">
            <div id="more"></div>
            <div id="solnce"></div>
            <div id="luna">
              <div id="mes"></div>
            </div>
        </div>
    

CSS

#more{
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -100%;
    z-index: 0;
    background: blue;
}
#solnce{ 
    width: 30px; 
    height: 30px;
    position: absolute;
    border-radius: 50%;
    background: yellow;  
    animation: rote 7s infinite;
    z-index: -1;
     box-shadow: 0px 0px 30px -30px #aaa;
}
@keyframes rote{
    0%{left: 0%; top: 0%; background: white;}
    20%{ width: 70px; height: 70px; background: yellow;}
    60%{left: 30%; top: 60%; background: red;width: 180px; height: 180px; box-shadow: 0px 0px 24px 0px red;}
    100%{left: 40%; top: 100%; background: red;width: 200px; height: 200px; box-shadow: 0px 0px 20px 0px red;}
}
#fon{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    background: blue;
    animation: nebo 7s infinite;
}
@keyframes nebo{
    20%{background: #83d0d4;}
    60%{background: blue;}
    100%{background: black;}
   
}
#luna{
    width: 10px; 
    height: 10px;
    position: absolute;
    bottom: -40%;
    left:  0%;
    border-radius: 50%;
    background: white;  
    animation: lun 7s infinite;
    z-index: -2;
    box-shadow: 0px 0px 30px -30px #aaa;
}
@keyframes lun {
    65%{left: 0%; bottom: -50%;}
    100%{left: 50%; bottom: 55%; width: 90px; height: 90px;  background: yellow; }
}
#mes{
    width: 10px; 
    height: 10px;
    position: absolute ;
    bottom: 0%;
    left:  0%;
    border-radius: 50%;
    background: black;  
    animation: mes 7s infinite;
    z-index: -2;
}
@keyframes mes {
    20%{background: #83d0d4;}
    60%{background: blue;}
    65%{left: 0%; bottom: 0%;}
    100%{left: 20%; bottom: 0%; width: 90px; height: 90px; background: black}
}