Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .box { padding: 2em; width: 40px; height: 40px; 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-duration: 1s, 1s; -moz-transition-duration: 1s, 1s; -o-transition-duration: 1s, 1s; transition-duration: 1s, 1s; -webkit-transition-timing-function: ease-out, cubic-bezier(.75, .3, .14, 1.12); -moz-transition-timing-function: ease-out, cubic-bezier(.75, .3, .14, 1.12); -o-transition-timing-function: ease-out, cubic-bezier(.75, .3, .14, 1.12); transition-timing-function: ease-out, cubic-bezier(.75, .3, .14, 1.12); /* first value corresponds to the first transition-property value, and the second value corresponds to the second */ } .example:hover .box { left: 450px; background-color: #ccc; } </style> </head> <body> <h2>Transition-timing-function property example</h2> <p>Hover over the element to see the effect</p> <div class="example"> <div class="box"></div> </div> </body> </html>