@-webkit-keyframes aumentar { 0% { -webkit-transform:translateX(0); } 20%, 24%, 100% { -webkit-transform:translateX(500px); } 22%, 56% { -webkit-transform:translateX(450px); } } @-webkit-keyframes reducir { 0% { -webkit-transform:translateX(0); } 20%, 24%, 100% { -webkit-transform:translateX(500px); } 22%, 56% { -webkit-transform:translateX(450px); } } .caja { position: absolute; top: 0; left: -500px; width: 600px; height: 100px; background-color: red; -webkit-animation: reducir .5s reverse; } .caja:hover { -webkit-animation: aumentar .5s forwards; }