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: ease; -moz-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; } .el2 { -webkit-transition-timing-function: linear; -moz-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; } .el3 { -webkit-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; transition-timing-function: ease-in; } .el4 { -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } </style> </head> <body> <h2>Transition-timing-function property example</h2> <div class="container"> <p> <code>transition-timing-function: ease;</code> </p> <div class="example el1"></div> <p> <code>transition-timing-function: linear;</code> </p> <div class="example el2"></div> <p> <code>transition-timing-function: ease-in;</code> </p> <div class="example el3"></div> <p> <code>transition-timing-function: ease-out;</code> </p> <div class="example el4"></div> </div> </body> </html>