Transition-timing-function - Property CSS
Summary of characteristics of the transition-timing-function property
ease | ease-in | ease-out | ease-in-out | linear | steps() | cubic-bezier()easeNot animable: the transition-timing-function property cannot be animated.Per grammar: serialization in the order of syntax.Syntax diagram of transition-timing-function.
transition-timing-function property.The links in the diagram provide more details about the values.
Description of the transition-timing-function property.
transition-timing-function defines an acceleration function to calculate the dynamics of the transition.
Is the progression linear? Is there slowing down or speeding up? etc.
Reminder: a transition consists of gradually changing the value of a property.
For a general explanation about transitions, refer to the shorthand property transition.
Values for transition-timing-function.
- transition-timing-function: ease-in;
The different acceleration functions are described below. They are the same as those of the
animation-timing-functionproperty.Value
TimelinearThe value varies at a uniform speed throughout the entire duration of the transition.Value.png)
Timelinear()The value evolves following a series of straight line segments.Value
TimeeaseThe variation of the value is slightly slowed at the beginning, and strongly slowed at the end.Value
Timeease-inThe variation of the value slows down at the beginning, then continues at a uniform speed.Value
Timeease-outThe variation of the value starts with a constant speed, then slows down towards the end.Value
Timeease-in-outThe variation of the value experiences a slowdown at the beginning and at the end.Value
Timesteps(5)The variation of the value does not happen in jumps. The number of steps is the parameter of the functionsteps().
Value
Timecubic-bezier()The variation of the value follows a law defined by the four parameters of the functioncubic-bezier(). - transition-timing-function: ease-in, linear;
When several values are specified, separated by commas, they apply to the different transitions defined by the property
transition-property. See the explanations on the page on multiple transitions. - transition-timing-function: initial; (
ease) transition-timing-function: inherit; transition-timing-function: revert; transition-timing-function: revertLayer; transition-timing-function: unset;Links to the presentation of these values:
initial,inherit,revert,revert-layer,unset.
Animation of the transition-timing-function property.
The animation of the property transition-timing-function is not possible.
Manipulating the transition-timing-function property programmatically.
With Javascript, change the value of transition-timing-function.
In JavaScript, here is how to modify the value of transition-timing-function. There are two possible codes in JavaScript because this language accepts
the property name written in kebab-case, typical of CSS, and in camel-case.
let el = document.getElementById('id');
el.style['transition-timing-function'] = 'ease-in-out';
// or
let el = document.getElementById('id');
el.style.transitionTimingFunction = 'ease-in-out';
With Javascript, read the value of transition-timing-function.
This code retrieves the value of the property when it has been directly assigned to the element itself by the style attribute,
and not through a CSS selector.
let el = document.getElementById('id');
let value = el.style['transition-timing-function'];
// or
let el = document.getElementById('id');
let value = el.style.transitionTimingFunction;
With Javascript, read the computed value of transition-timing-function.
The computed value is the one that results from the evaluation of the inheritance cascade, or, failing that, it will be the initial value of
the property (ease in the case of transition-timing-function).
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('transition-timing-function');
With JQuery, change the value of transition-timing-function.
$('#id').css('transition-timing-function', 'ease-in-out');
// or
$('#id').css('transitionTimingFunction', 'ease-in-out');
With JQuery, read the computed value of transition-timing-function.
let value = $('#id').css('transition-timing-function');
Other examples of code.
Other examples of Javascript and JQuery code interacting with CSS are given on the page Javascript and CSS.
Try it yourself.
The buttons below apply the entered value to the property transition-timing-function and then display either the value as it was applied, or the computed value.
This second option allows seeing how the value of the property is stored (serialized), but in the case of transition-timing-function, there is no difference
between the applied value and the computed value.
Simulator.
Choose a value for the property transition-timing-function and click the 'Start transition' button. The second element follows a linear transition, for comparison.
(for comparison)
Browsers compatibility with transition-timing-function.
Acceleration functions have been well supported by all browsers for quite a few years.
There is no compatibility issue to consider for the property transition-timing-function.
transition-timing-function property which defines the acceleration function of the transition.support
transition-timing-functionproperty
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
QQ Browser
Safari sur IOS
Firefox pour Androïd
Opéra Mobile
Baidu Browser
KaiOS Browser
UC Browser pour Androïd
Samsung Internet
Chrome
Edge
Firefox
Androïd Brower
Chrome pour Androïd
Opéra
Safari
Opéra mini
Historic of the transition-timing-function property.
-
CSS Transitions - Level 1
Normally, when a property changes of value, its display on the screen is immediate. This specification module describes how to progressively change properties from one value to another over a given time. In other words, how to gradually move from one state to another.
However, an external event is needed to trigger the change in property values (JavaScript code, user action, etc.). In this sense, transitions differ from animations, which can run independently of any external action.Regardingtransition-timing-function.
March 20, 2009Working Draft.
-
CSS Easing Functions Level 1
Regardingtransition-timing-function. Description of the different movement dynamics applicable to transitions.February 21, 2017Working Draft.April 30, 2019Candidate Recommendation. -
CSS Transitions - Level 2
Level 2 of the specification on transitions adds the ability to apply a transition to a discrete property.
A new at-rule@starting-styleallows defining the starting values for property values. It is now possible to apply a transition to elements that go from the invisible state to the visible state.Regardingtransition-timing-function. No change to thetransition-timing-functionproperty.September 05, 2023Working Draft. -
CSS Easing Functions Level 2
Regardingtransition-timing-function. No change regarding movement dynamics.August 29, 2024Working Draft.
See also : the transitions.
The W3C publishes the specifications in the form of modules. Transitions are described in the module CSS Transitions, as well as the other properties listed below.
Properties:
discrete.