#box { margin: 0 auto; width: 100px; height: 100px; background-color: #ffcc00; -webkit-transition-property: width; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out; -webkit-transition-delay: 0.5s; transition-property: width; transition-duration: 1s; transition-timing-function: ease-in-out; transition-delay: 0.5s; } #box:hover { width: 300px; }
<div id="container"> <div id="box"></div> </div>