Source Code: (back to article)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
padding: 2em;
width: 30px;
height: 30px;
left: 0;
background-color: #666;
border-radius: 50%;
position: relative;
-webkit-transition-property: background-color, left;
-moz-transition-property: background-color, left;
-o-transition-property: background-color, left;
transition-property: background-color, left;
-webkit-transition-duration: 1s, 1s;
-moz-transition-duration: 1s, 1s;
-o-transition-duration: 1s, 1s;
transition-duration: 1s, 1s;
}
.container:hover .example {
left: 250px;
background-color: #ccc;
}
.el1 {
-webkit-transition-timing-function: step-start;
-moz-transition-timing-function: step-start;
-o-transition-timing-function: step-start;
transition-timing-function: step-start;
}
.el2 {
-webkit-transition-timing-function: step-end;
-moz-transition-timing-function: step-end;
-o-transition-timing-function: step-end;