A transition effect with the same speed from start to end:
![]()
The transition-timing-function property is not supported in any browsers.
Firefox 4 supports an alternative, the -moz-transition-timing-function property.
Safari and Chrome support an alternative, the -webkit-transition-timing-function property.
Opera support an alternative, the -o-transition-timing-function property.
The transition-timing-function property specifies the speed curve of the transition effect.
This property allows a transition effect to change speed over its duration.
| Default value: | ease |
|---|---|
| Inherited: | no |
| Version: | CSS3 |
| JavaScript syntax: | object.style.transitionTimingFunction="linear" |
| Value | Description |
|---|---|
| linear | Specifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1)) |
| ease | Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1)) |
| ease-in | Specifies a transition effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1)) |
| ease-out | Specifies a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1)) |
| ease-in-out | Specifies a transition effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1)) |
| cubic-bezier(n,n,n,n) | Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1 |
Tip: Try the different values in the examples below to understand how it works!
To better understand the different function values: Here are five different div elements with five different values:
Same as the example above, but the speed curves are specified with the cubic-bezier function:
Complete CSS Reference
The perfect solution for professionals who need to balance work, family, and career building.
More than 10 000 certificates already issued!
The HTML Certificate documents your knowledge of HTML.
The CSS Certificate documents your knowledge of advanced CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The jQuery Certificate documents your knowledge of jQuery.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The ASP Certificate documents your knowledge of ASP, SQL, and ADO.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
| WEB HOSTING |
|---|
| Best Web Hosting |
| PHP MySQL Hosting |
| Best Hosting Coupons |
| UK Reseller Hosting |
| Cloud Hosting |
| Top Web Hosting |
| $3.98 Unlimited Hosting |
| Premium Website Design |
| WEB BUILDING |
|---|
| Download XML Editor |
| FREE Website BUILDER |
| Best Website Templates Top CSS Templates |
| CREATE HTML Websites |
| EASY WEBSITE BUILDER |
| W3SCHOOLS EXAMS |
|---|
|
Get Certified in: HTML, CSS, JavaScript, XML, PHP, and ASP |
| W3SCHOOLS BOOKS |
|---|
|
New Books: HTML, CSS JavaScript, and Ajax |
| STATISTICS |
|---|
|
Browser Statistics Browser OS Browser Display |
| SHARE THIS PAGE |
|---|