Source Code:
(back to article)
Submit
Result:
Report an issue
<!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>