transition-timing-function
CSS transition-timing-function Property
The transition-timing-function CSS property specifies transition proceeding over its duration allowing to change the speed.
The transition-timing-function property is one of the CSS3 properties.
It has the following values:
ease
linear
ease-in
ease-out
ease-in-out
step-start
step-end
For maximum browser compatibility extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -moz- for Firefox,-o- for older versions of Opera are used with this property.
| 类目 | 类目 |
|---|---|
| Initial Value | ease |
| Applies to | All elements, ::before and ::after pseudo-elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.transitionTimingFunction = “ease in”; |
Syntax
Syntax
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) | initial | inherit;
Example of transition-timing-function:
<!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>
Example of transition-timing-function with the “ease”, “linear”, “ease-in” and “ease-out” values:
<!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>
Example of transition-timing-function with the “step-start” and “step-end” values:
<!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>
Values
Values
| Value | Description |
|---|---|
| ease | The transition effect starts slowly, then becomes faster and ends slowly. This is the default value. |
| linear | The transition effect starts at the same speed. |
| ease-in | The transition effect starts slowly, but becomes faster at the end and stops abruptly. |
| ease-out | The transition effect starts quickly, but slows down at the end. |
| ease-in-out | The transition effect starts slowly and ends slowly. |
| step-start | Equal to 1, start. |
| step-end | Equal to 1, end. |
| steps(int,start | end) |
| cubic-bezier (n,n,n,n) | Defines the values by cubic-bezier function. |
| initial | It makes the property use its default value. |
| inherit | It inherits the property from its parents element. |