<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #fff;
color: #000;
font-size: 1em;
font-family: 'Roboto', Helvetica, sans-serif;
}
.example {
padding: 1em;
width: 30px;
height: 30px;
left: 0;
background-color: #666;
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-timing-function: linear, linear;
-moz-transition-timing-function: linear, linear;
-o-transition-timing-function: linear, linear;
transition-timing-function: linear, linear;
}
.container:hover .example {
left: 250px;
background-color: #ccc;
}
.el1 {
-webkit-transition-duration: .3s, .3s;
-moz-transition-duration: .3s, .3s;
-o-transition-duration: .3s, .3s;
transition-duration: .3s, .3s;