Source Code: (back to article)
<!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">