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/animation-delay/index.html | 145 +++++++++++++++++++++++++ 1 file changed, 145 insertions(+) create mode 100644 files/pt-br/web/css/animation-delay/index.html (limited to 'files/pt-br/web/css/animation-delay') diff --git a/files/pt-br/web/css/animation-delay/index.html b/files/pt-br/web/css/animation-delay/index.html new file mode 100644 index 0000000000..e8ed7db06d --- /dev/null +++ b/files/pt-br/web/css/animation-delay/index.html @@ -0,0 +1,145 @@ +--- +title: animation-delay +slug: Web/CSS/animation-delay +tags: + - Animação +translation_of: Web/CSS/animation-delay +--- +
{{CSSRef}}
+ +

A propriedade CSS animation-delay especifíca quando uma animação deve começar.  Você pode começar a animação no futuro, imediatamente ou desde o  início, ou imediatamente e parcialmente através do ciclo de animação.

+ +
/* Uma animação */
+animation-delay: 3s;
+animation-delay: 0s;
+animation-delay: -1500ms;
+
+/* Várias animações */
+animation-delay: 2.1s, 480ms;
+
+ +

Muitas vezes é conveniente usar a propriedade abreviada {{cssxref("animation")}} para definir todas as propriedades de animação de uma só vez. 

+ +

{{cssinfo}}

+ +

Sintaxe

+ +

Valores

+ +
+
{{cssxref("<time>")}}
+
O deslocamento do tempo, a partir do momento em que a animação é aplicada ao elemento, no qual a animação deve começar. Isso pode ser especificado em segundos (s) ou milesegundos or milliseconds (ms). A unidade é necessaria.
+
Um valor positivo indica que a animação deve começar após o período de especificação ter decorrido.  O valor de 0s,  que é o padrão, incida que a animação deve começar desde que foi aplicada.
+
+

Um valor negativo faz com que a animação comece imediatamente, mas parcialmente através do seu ciclo. Por exemplo, se você específicar -1s como tempo da animation-delay , a animação vai começar imediatamente, mas começará 1 segundo na sequência de animação. Se você específicar um valor negativo para a animation-delay, mas o valor inicial é implícito, o valor inicial é retirado do momento em que a animação é aplicada ao elemento.

+
+
+ +
+

Note: Quando você especifica vários valores separados por vírgula em uma propriedade animation-* ,  eles serão atribuídos às animações especificadas na propriedade {{cssxref("animation-name")}} em diferentes modos,  dependendo de quantos existam. Para mais informações veja Setting multiple animation property values.

+
+ +

Sintaxe formal

+ +
{{csssyntax}}
+
+ +

Exemplos

+ +

Veja CSS animations para exemplos.

+ +

Especificação

+ + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('CSS3 Animations', '#animation-delay', 'animation-delay')}}{{Spec2('CSS3 Animations')}}Definição inicial.
+ +

Compatibilidade com os browsers

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatChrome(43.0)}}		{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}[1]		1012{{property_prefix("-o")}}
+ 12.10		4.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoMobile("16.0")}}[1]		{{CompatUnknown}}12{{property_prefix("-o")}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatUnknown}}
+
+ +

[1] Além do suporte não prefixado, Gecko 44.0 {{geckoRelease("44.0")}} adicionou um suporte para uma versão prefixada de -webkit- por razões de compatibilidade na Web por trás da preferência layout.css.prefixes.webkit, padronizando para false. Desde Gecko 49.0 {{geckoRelease("49.0")}} os padrões de preferência são true.

+ +

Quantum CSS notas

+ + + +

Veja também

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