Source Code:
(back to article)
Submit
Result:
Report an issue
<!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; } .el2 { -webkit-transition-duration: .6s, .6s; -moz-transition-duration: .6s, .6s; -o-transition-duration: .6s, .6s; transition-duration: .6s, .6s; } .el3 { -webkit-transition-duration: 1s, 1s; -moz-transition-duration: 1s, 1s; -o-transition-duration: 1s, 1s; transition-duration: 1s, 1s; } .el4 { -webkit-transition-duration: 2s, 2s; -moz-transition-duration: 2s, 2s; -o-transition-duration: 2s, 2s; transition-duration: 2s, 2s; } </style> </head> <body> <h2>Transition-duration property example</h2> <div class="container"> <p> <code>transition-duration: .3s, .3s;</code> </p> <div class="example el1"></div> <p> <code>transition-duration: .6s, .6s;</code> </p> <div class="example el2"></div> <p> <code>transition-duration: 1s, 1s;</code> </p> <div class="example el3"></div> <p> <code>transition-duration: 2s, 2s;</code> </p> <div class="example el4"></div> </div> </body> </html>