No hay cosa más fuerte que el verdadero amor.

HTML

<div id="recuadro1">
 <h3>Texto</h3>
 <p>Texto</p></div>

CSS

#recuadro1{
  border-radius: 20px;  
  background-color:#E1CCDE;
  width:200px;
  height:200px;
  padding:8px;
  -moz-animation-play-state:paused;
  -moz-animation-name: animacion1;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: alternate;
  -webkit-animation-play-state:paused;
  -webkit-animation-name: animacion1;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -o-animation-play-state:paused;
  -o-animation-name: animacion1;
  -o-animation-duration: 4s;
  -o-animation-iteration-count: infinite;
  -o-animation-direction: alternate;
}

#recuadro1:hover {
  -moz-animation-play-state:running;
  -webkit-animation-play-state:running;
  -o-animation-play-state:running;
}

@-moz-keyframes animacion1 {
  from {
    border-radius:0px;
    background-color:#E1CCDE;
  }
  to {
    border-radius:40px;
    background-color:#F4B9EB;
  }
}

@-webkit-keyframes animacion1 {
  from {
    border-radius:0px;
    background-color:#E1CCDE;
  }
  to {
    border-radius:40px;
    background-color:#F4B9EB;
  }
}

@-o-keyframes animacion1 {
  from {
    border-radius:0px;
    background-color:#E1CCDE;
  }
  to {
    border-radius:40px;
    background-color:#F4B9EB;
  }
}


body {
  background:white;
  margin:50px;
}