Translate in CSS

by Hugh Chapman

HTML

<div id="wrapper">
    <div id="box">
        <img src="http://startupnorth.ca/wp-content/uploads/2013/12/unicor1.jpg" width="100" height="auto"/>
    </div>
</div>

CSS

#wrapper {
    position: relative;
    background-color: silver;
}
#box:hover {
    -webkit-transform: translateX(79%);
    -webkit-transition: -webkit-transform 1000ms ease-out;
}