HTML

<div id="sq"> 
 <div class="circ1">Te amo</div> 
 <div class="circ2"><a href="http://tutorialgloriav.eklablog.com/" target="_blank"><img src="http://imagenes.gifmania.com.pr/Gifs-Animados-Amor/Animaciones-Corazones/Imagenes-Animadas-Corazones-Colores/corazon-colores16.gif" alt="" /></a></div> 
 <div class="circ3">Con coraz&oacute;n y alma</div> 
 </div> 

CSS

<style><!--.circ1{ 
 width:160px; 
    height:160px;    
    border-radius:120px; 
    background-color:rgb(255, 255, 255);       
    }
.circ2{ 
    width:150px; 
    height:180px;       
    border-radius: 80px / 50px; 
    background-color:rgb(255, 255, 255);    
    } 
        
.circ3{ 
    width:150px; 
    height:220px;    
    border-radius: 80px / 50px; 
    background-color:rgb(255, 255, 255);       
    }
.circ1{    
    width:120px; 
    height:120px;    
    border-radius:120px; 
    background-color:rgb(255, 255, 255);    
         margin:20px 0 0 60px;    
    } 

.circ2{ 
    width:150px; 
    height:80px;       
    border-radius: 80px / 50px; 
    background-color:rgb(255, 255, 255);    
         margin:-90px 0 0 80px; 
    } 
        
.circ3{ 
    width:150px; 
    height:90px;    
    border-radius: 80px / 50px; 
    background-color:rgb(255, 255, 255);    
    margin:-90px 0 0 0px;    
    }
@-webkit-keyframes animar{ 
     0%  { }  
      50% { -webkit-transform:translateX(700px) scale(1.2);} 
      100% {-webkit-transform:translateX(0px); } 
}
#sq{ 
    -webkit-animation-name: animar; 
    -webkit-animation-duration: 20s; 
    -webkit-animation-timing-function: lineal; 
    -webkit-animation-iteration-count:infinite; 
    opacity: 0.6; 
    margin:0; 
    position:absolute; 
}
#sq{ 
    -webkit-animation-name: animar; 
    -webkit-animation-duration: 20s; 
    -webkit-animation-timing-function: lineal; 
    -webkit-animation-iteration-count:infinite; 
    opacity: 0.6; 
    margin:0; 
    position:absolute; 
} 

#sq2{ 
    -webkit-animation-name: animar;
    }
 --></style>