--- title: transition-timing-function slug: Web/CSS/transition-timing-function translation_of: Web/CSS/transition-timing-function ---
{{CSSRef}}

A propriedade CSS transition-timing-function é usada para descrever como os valores intermediários das propriedades CSS sendo afetados por um efeito de transição são calculados. Em essência isso permite você estabelecer uma curva de aceleração, para que então a velocidade da transição possa variar durante sua duração.

Essa curva de aceleração é definida usando {{cssxref("<timing-function>")}} para cada propriedade a ser transicionada.

/* Keyword values */
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

/* Function values */
transition-timing-function: steps(4, end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
transition-timing-function: frames(10);

/* Multiple timing functions */
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* Global values */
transition-timing-function: inherit;
transition-timing-function: initial;
transition-timing-function: unset;

You may specify multiple timing functions; each one will be applied to the corresponding property as specified by the {{ cssxref("transition-property") }} property, which acts as a master list. If there are fewer functions specified than in the master list, missing values are set to the initial value (ease). If there are more timing functions, the list is simply truncated to the right size. In both case the CSS declaration stays valid.

{{cssinfo}}

Syntax

Values

<timing-function>
Each {{cssxref("<timing-function>")}} represents the timing function to link to the corresponding property to transition, as defined in {{ cssxref("transition-property") }}.

Formal syntax

{{csssyntax}}

Examples

transition-timing-function: ease

{{EmbedLiveSample("ttf_ease",275,150)}}

transition-timing-function: ease-in

{{EmbedLiveSample("ttf_easein",275,150)}}

transition-timing-function: ease-out

{{EmbedLiveSample("ttf_easeout",275,150)}}

transition-timing-function: ease-in-out

{{EmbedLiveSample("ttf_easeinout",275,150)}}

transition-timing-function: linear

{{EmbedLiveSample("ttf_linear",275,150)}}

transition-timing-function: step-start

{{EmbedLiveSample("ttf_stepstart",275,150)}}

transition-timing-function: step-end

{{EmbedLiveSample("ttf_stepend",275,150)}}

transition-timing-function: steps(4, end)

{{EmbedLiveSample("ttf_step4end",275,150)}}

Specifications

Specification Status Comment
{{ SpecName('CSS3 Transitions', '#transition-timing-function-property', 'transition-timing-function') }} {{ Spec2('CSS3 Transitions') }} Initial definition

Compatibilidade com navegadores

{{ CompatibilityTable() }}

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 26 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}
{{CompatVersionUnknown}}		 {{ CompatGeckoDesktop("2.0") }}{{ property_prefix("-moz") }}
{{ CompatGeckoDesktop("16.0") }}[1]		 10 11.6{{ property_prefix("-o") }}
12.10 #		 {{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}
frames() {{CompatVersionUnknown}} {{CompatUnknown}} {{CompatGeckoDesktop("55.0")}} {{CompatNo}} {{CompatVersionUnknown}} {{CompatUnknown}}
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }} {{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }} {{CompatVersionUnknown}}{{property_prefix("-webkit")}}
{{CompatVersionUnknown}}		 {{ CompatGeckoMobile("2.0") }}{{ property_prefix("-moz") }}
{{ CompatGeckoMobile("16.0") }}[1]		 {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}
frames() {{CompatUnknown}} {{CompatVersionUnknown}} {{CompatUnknown}} {{ CompatGeckoMobile("55.0") }} {{CompatNo}} {{CompatVersionUnknown}} {{CompatUnknown}}

[1] In addition to the unprefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to true.

See also