Source Code:
(back to article)
Submit
Result:
Report an issue
<!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; transition-timing-function: step-end; } </style> </head> <body> <h2> Transition-timing-function property example</h2> <div class="container"> <p> <code>transition-timing-function: step-start;</code> </p> <div class="example el1"></div> <p> <code>transition-timing-function: step-end;</code> </p> <div class="example el2"></div> </div> </body> </html>