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 CSS transition é 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 |
<cubic-bezier-easing-function> |
<step-easing-function>
<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> ]? ) <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 sobre CSS transitions.
Specifications
Specification | Status | Comment |
---|---|---|
CSS Transitions The definition of 'transition' in that specification. |
Rascunho atual | Initial definition |
Compatibilidade com navegadores
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 -webkit (en-US) 26.0 |
4.0 (2.0) -moz (en-US) 16.0 (16.0) |
10.0 | 11.6 -o (en-US) 12.10 # |
3.0 -webkit (en-US) 6.1 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 2.1 -webkit (en-US) | 4.0 (2.0) -moz (en-US) 16.0 (16.0) |
? | 10.0 -o (en-US) 12.10 # |
3.2 -webkit (en-US) |