From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/css/transition/index.html | 130 ++++++++++++++++++++++++++++++ 1 file changed, 130 insertions(+) create mode 100644 files/pt-br/web/css/transition/index.html (limited to 'files/pt-br/web/css/transition/index.html') diff --git a/files/pt-br/web/css/transition/index.html b/files/pt-br/web/css/transition/index.html new file mode 100644 index 0000000000..e5e798dda0 --- /dev/null +++ b/files/pt-br/web/css/transition/index.html @@ -0,0 +1,130 @@ +--- +title: transition +slug: Web/CSS/transition +translation_of: Web/CSS/transition +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Summary

+ +

A propriedade de CSS  transition é uma propriedade abreviada para {{ cssxref("transition-property") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-timing-function") }} e {{ cssxref("transition-delay") }}. Ela permite definir a transição entre dois estados de um elemento. Estados diferentes podem ser definidos usando pseudo-classes tais como {{cssxref(":hover")}} ou {{cssxref(":active")}}; ou dinamicamente, usando javascript.

+ +

{{cssinfo}}

+ +

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 {{cssxref("transition-duration")}}, duration e o segundo valor que pode ser analisado como tempo é atribuído ao {{cssxref("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

+ +
{{csssyntax}}
+ +

Examples

+ +

Existem vários outros exemplos de transições CSS incluídas no artigo principal sobre CSS transitions.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Transitions', '#transition-shorthand-property', 'transition') }}{{ Spec2('CSS3 Transitions') }}Initial definition
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0 {{ property_prefix("-webkit") }}
+ 26.0		{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		10.011.6 {{ property_prefix("-o") }}
+ 12.10 #		3.0 {{ property_prefix("-webkit") }}
+ 6.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.1 {{ property_prefix("-webkit") }}{{ CompatGeckoMobile("2.0") }} {{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("16.0") }}		{{ CompatUnknown() }}10.0 {{ property_prefix("-o") }}
+ 12.10 #		3.2 {{ property_prefix("-webkit") }}
+
+ +

See also

+ + -- cgit v1.2.3-54-g00ecf