Edit in JSFiddle

.bubble {
   width: 234px;
   height: 234px;
   margin-top: 10%;
   margin-left: 25%;
   background: #ED5565;
   
   -webkit-border-radius:234px;
   -moz-border-radius:234px;
   border-radius:234px;
    
   animation:         fadein 5s ease-in forwards;
   -moz-animation:    fadein 5s ease-in forwards; /* Firefox           */
   -webkit-animation: fadein 5s ease-in forwards; /* Safari and Chrome */   
   -o-animation:      fadein 5s ease-in forwards; /* Opera             */ 

   -webkit-transition: all 0.7s ease;
   transition: all 0.7s ease;
}

.bubble2 {
   width: 150px;
   height: 150px;
   margin-top: -25%;
   margin-left: 43%;
   background: #FFCE54;
   
   -webkit-border-radius:150px;
   -moz-border-radius:150px;
   border-radius:150px;
    
   animation:         fadein 7s ease-in forwards;
   -moz-animation:    fadein 7s ease-in forwards; /* Firefox           */
   -webkit-animation: fadein 7s ease-in forwards; /* Safari and Chrome */   
   -o-animation:      fadein 7s ease-in forwards; /* Opera             */   
   
   -webkit-transition: all 0.7s ease;
   transition: all 0.7s ease;
}

.bubble3 {
   width: 200px;
   height: 200px;
   margin-top: -49%;
   margin-left: 59%;
   background: #A0D468;
   
   -webkit-border-radius:200px;
   -moz-border-radius:200px;
   border-radius:200px;
    
   animation:         fadein 5s ease-in forwards;
   -moz-animation:    fadein 5s ease-in forwards; /* Firefox           */
   -webkit-animation: fadein 5s ease-in forwards; /* Safari and Chrome */   
   -o-animation:      fadein 5s ease-in forwards; /* Opera             */  
   
   -webkit-transition: all 0.7s ease;
   transition: all 0.7s ease;
}


.bubble4 {
   width: 180px;
   height: 180px;
   margin-top: -26%;
   margin-left: 3%;
   background: #48CFAD;
   
   -webkit-border-radius:180px;
   -moz-border-radius:180px;
   border-radius:180px;
    
   animation:         fadein 5s ease-in forwards;
   -moz-animation:    fadein 5s ease-in forwards; /* Firefox           */
   -webkit-animation: fadein 5s ease-in forwards; /* Safari and Chrome */   
   -o-animation:      fadein 5s ease-in forwards; /* Opera             */   
   
   -webkit-transition: all 0.7s ease;
   transition: all 0.7s ease;
}


.bubble5 {
  width: 60px;
  height: 60px;
  margin-top: -30%;
  margin-left: 52%;
  background: #ED9E46;
  
  -webkit-border-radius:60px;
  -moz-border-radius:60px;
  border-radius:60px;
  
   animation:         fadein 6s ease-in forwards;
   -moz-animation:    fadein 6s ease-in forwards; /* Firefox           */
   -webkit-animation: fadein 6s ease-in forwards; /* Safari and Chrome */   
   -o-animation:      fadein 6s ease-in forwards; /* Opera             */   
   
   -webkit-transition: all 0.7s ease;
   transition: all 0.7s ease;
}

.bubble:hover , .bubble2:hover , .bubble3:hover,
.bubble4:hover, .bubble5:hover{
  -webkit-box-shadow: 0px 0px 15px 10px rgba(0, 0, 0, .75);
   box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);
   background: #666263;
}

.bubble p, .bubble2 p, .bubble3 p, .bubble4 p, .bubble5 p{
   text-align: center;
   padding-top: 40%;
   font-size: 1.2em;
   color: #FFF;
}

@keyframes fadein {
    0%   { opacity:0;}
    100% { opacity:0.8;}
}
@-moz-keyframes fadein { /* Firefox */
    0%   { opacity:0;}
    100% { opacity:0.8;}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    0%   { opacity:0;}
    100% { opacity:0.8;}
}
@-o-keyframes fadein { /* Opera */
    0%   { opacity:0;}
    100% { opacity:0.8;}
}
	

<div class="bubble">
     <p>A</p></div>
   <div class="bubble2">
     <p>B</p></div>
   <div class="bubble3">
     <p>C</p></div>
   <div class="bubble4">
     <p>D</p></div>
   <div class="bubble5">
     <p>E</p></div>