transition
Experimental: Esta é uma tecnologia experimental (en-US)
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.
Summary
A propriedade de CSStransition é uma propriedade abreviada para transition-property
(en-US), transition-duration
(en-US), transition-timing-function
e transition-delay
. Ela permite definir a transição entre dois estados de um elemento. Estados diferentes podem ser definidos usando pseudo-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 ::after pseudo-elements |
Inherited | não |
Computed value | as each of the properties of the shorthand:
|
Animation type | Not animatable |
Syntax
css
/* 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 ao transition-duration
(en-US), duration e o segundo valor que pode ser analisado como tempo é atribuído ao transition-delay
.
Veja como 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># (en-US)
<single-transition> =
[ (en-US) none | (en-US) <single-transition-property> ] (en-US) || (en-US)
<time> || (en-US)
<easing-function> || (en-US)
<time>
<single-transition-property> =
all | (en-US)
<custom-ident> (en-US)
<easing-function> =
linear | (en-US)
<linear-easing-function> | (en-US)
<cubic-bezier-easing-function> | (en-US)
<step-easing-function>
<linear-easing-function> =
linear( <linear-stop-list> )
<cubic-bezier-easing-function> =
ease | (en-US)
ease-in | (en-US)
ease-out | (en-US)
ease-in-out | (en-US)
cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )
<step-easing-function> =
step-start | (en-US)
step-end | (en-US)
steps( <integer> (en-US) [ (en-US), <step-position> ] (en-US)? (en-US) )
<linear-stop-list> =
[ (en-US) <linear-stop> ] (en-US)# (en-US)
<step-position> =
jump-start | (en-US)
jump-end | (en-US)
jump-none | (en-US)
jump-both | (en-US)
start | (en-US)
end
<linear-stop> =
<number> && (en-US)
<linear-stop-length>? (en-US)
<linear-stop-length> =
<percentage> (en-US){1,2} (en-US)
Examples
Existem vários outros exemplos de transições CSS incluídas no artigo principal sobre CSS transitions.
Specifications
Specification | Status | Comment |
---|---|---|
CSS Transitions The definition of 'transition' in that specification. |
Rascunho atual | Initial definition |
Compatibilidade com navegadores
BCD tables only load in the browser