<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element {
padding: 1em;
width: 30px;
height: 30px;
left: 0;
cursor: pointer;
background-color: #8ebf42;
position: relative;
-webkit-transition-property: background-color, left;
transition-property: background-color, left;
-webkit-transition-duration: 1s, 1s;
transition-duration: 1s, 1s;
-webkit-transition-timing-function: ease-out, cubic-bezier(.82, .1, .14, 1);
transition-timing-function: ease-out, cubic-bezier(.82, .1, .14, 1);
}
.element:hover {
left: 250px;
background-color: purple;
}
</style>
</head>
<body>
<div class="container">
<p>Hover over the box to see the element's background color and left position offset transition.</p>
<div class="element"></div>
</div>
</body>
</html>