animation-delay
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 |
Computed value | as specified |
Animation type | Not animatable |
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.
Nota: 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
(en-US) em diferentes modos, dependendo de quantos existam. Para mais informações veja Setting multiple animation property values.
Sintaxe formal
Exemplos
Veja CSS animations (en-US) para exemplos.
Especificação
Especificação | Status | Comentário |
---|---|---|
CSS Animations Level 1 The definition of 'animation-delay' in that specification. |
Rascunho atual | Definição inicial. |
Compatibilidade com os browsers
BCD tables only load in the browser
Veja também
- Using CSS animations (en-US)
- JavaScript
AnimationEvent
API