#anim { border:solid black 2px; height:30px; background-color:#BEF781; margin-left:2%; width:50px; } #anim:hover { animation: anim1 6s ease-in-out ; } @keyframes anim1 { from, to { width: 100px;background-color:#BEF781;} 25%, 75% { width: 600px;background-color:#F3F781;} 50% { width: 300px;background-color:#F7819F;} }