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 | discrete |
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 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>#
<single-transition> =
[ none | <single-transition-property> ] ||
<time> ||
<easing-function> ||
<time>
<single-transition-property> =
all |
<custom-ident> (en-US)
<easing-function> =
linear |
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>
<linear-easing-function> =
linear( <linear-stop-list> )
<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )
<step-easing-function> =
step-start |
step-end |
steps( <integer> (en-US) [, <step-position> ]? )
<linear-stop-list> =
[ <linear-stop> ]#
<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
<linear-stop> =
<number> &&
<linear-stop-length>?
<linear-stop-length> =
<percentage> (en-US){1,2}
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