Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
transition
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since setembro de 2015.
* Some parts of this feature may have varying levels of support.
Experimental:Esta é umatecnologia experimental
Verifique atabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.
Summary
A propriedade deCSStransition é umapropriedade abreviada paratransition-property,transition-duration,transition-timing-function etransition-delay. Ela permite definir a transição entre dois estados de um elemento. Estados diferentes podem ser definidos usandopseudo-classes tais como:hover ou:active; ou dinamicamente, usando javascript.
| Initial value | as each of the properties of the shorthand: |
|---|---|
| Aplica-se a | all elements,::before and::afterpseudo-elements |
| Inherited | não |
| Computed value | as each of the properties of the shorthand:
|
| Animation type | Not animatable |
Syntax
/* Apply to 1 property *//* property name | duration */transition: margin-left 4s;/* property name | duration | delay */transition: margin-left 4s 1s;/* property name | duration | timing function | delay */transition: margin-left 4s ease-in-out 1s;/* Apply to 2 properties */transition: margin-left 4s, color 1s;/* Apply to all changed properties */transition: all 0.5s ease-out;/* Global values */transition: inherit;transition: initial;transition: unset;Observe que a ordem é importante dentro dos itens nesta propriedade: o primeiro valor que pode ser analisado como tempo é atribuído aotransition-duration, duration e o segundo valor que pode ser analisado como tempo é atribuído aotransition-delay.
Vejacomo as coisas são manipuladas quando as listas de valores de propriedades não têm o mesmo comprimento. Em resumo, descrições de transição extras além do número de propriedades realmente sendo animadas são ignoradas.
Formal syntax
transition =
<single-transition>#
<single-transition> =
[none|<single-transition-property>]||
<time>||
<easing-function>||
<time>||
<transition-behavior-value>
<single-transition-property> =
all|
<custom-ident>
<easing-function> =
<linear-easing-function>|
<cubic-bezier-easing-function>|
<step-easing-function>
<transition-behavior-value> =
normal|
allow-discrete
<linear-easing-function> =
linear|
<linear()>
<cubic-bezier-easing-function> =
ease|
ease-in|
ease-out|
ease-in-out|
<cubic-bezier()>
<step-easing-function> =
step-start|
step-end|
<steps()>
<linear()> =
linear([<number>&&<percentage>{0,2}]#)
<cubic-bezier()> =
cubic-bezier([<number [0,1]> ,<number>]#{2})
<steps()> =
steps(<integer> ,<step-position>?)
<step-position> =
jump-start|
jump-end|
jump-none|
jump-both|
start|
end
Examples
Existem vários outros exemplos de transições CSS incluídas no artigo principal sobreCSS transitions.
Specifications
| Specification |
|---|
| CSS Transitions # transition-shorthand-property |