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 animation
para definir todas as propriedades de animação de uma só vez.
Initial value | 0s |
---|---|
Aplica-se a | all elements, ::before and ::after pseudo-elements |
Inherited | não |
Midia | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Sintaxe
Valores
<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 animation-name
em diferentes modos, dependendo de quantos existam. Para mais informações veja Setting multiple animation property values.
Sintaxe formal
Exemplos
Veja CSS animations para exemplos.
Especificação
Especificação | Status | Comentário |
---|---|---|
CSS Animations The definition of 'animation-delay' in that specification. |
Rascunho atual | Definição inicial. |
Compatibilidade com os browsers
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | (Yes)-webkit 43.0 |
(Yes)-webkit (Yes) |
5.0 (5.0)-moz 16.0 (16.0)[1] |
10 | 12-o 12.10 |
4.0-webkit |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | (Yes)-webkit | (Yes)-webkit (Yes) |
5.0 (5.0)-moz 16.0 (16.0)[1] |
? | 12-o | (Yes)-webkit | ? |
[1] Além do suporte não prefixado, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) 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 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) os padrões de preferência são true
.
Quantum CSS notas
- Gecko tem um bug em que, quando você anima um elemento fora da tela na tela, mas especifica um atraso, Gecko não repete em algumas plataformas, e.g. Windows (bug 1383239). Isso foi corrigido no Firefox's novo motor CSS paralelo (também conhecido como Quantum CSS ou Stylo, planejado para lançamento no Firefox 57).
Veja também
- Using CSS animations
- JavaScript
AnimationEvent
API