۝ OraWeb.it ۝ animation-delay

CSS animation-delay

La proprietà CSS3 animation-delay definisce il ritardo prima che inizi un'animazione

La proprietà animation-delay consente di specificare un ritardo prima che l'animazione inizi a essere eseguita. Questo ritardo può essere definito in secondi (s) o millisecondi (ms) ed è utile quando si desidera sincronizzare più animazioni o dare un effetto di "ritardo" prima che l'animazione inizi. Il valore predefinito di animation-delay è 0s, il che significa che l'animazione inizia immediatamente quando viene applicata.

HOSTING • VPS • DEDICATED SERVER • HOUSING • SSL • PEC • CLOUD • DOMAIN

Sintassi

animation-delay: time;

Significato dei valori principali:

time: il tempo di ritardo prima che l'animazione inizi. Può essere espresso in secondi (s) o millisecondi (ms). Il valore predefinito è 0s, ovvero l'animazione inizia immediatamente.

Esempio proprietà: animation-delay

Codice Esempio: animation-delay

CODE: CSS preleva codice

/* Animazione con ritardo di 2 secondi */

```
@keyframes slideIn {
```
```
  0% {
```
```
    opacity: 0;
```
```
    transform: translateX(-200px);
```
```
  }
```
```
  100% {
```
```
    opacity: 1;
```
```
    transform: translateX(0);
```
```
  }
```
```
}
```
```
 
```
```
.animated-box {
```
```
  display: inline-block;
```
```
  padding: 20px;
```
```
  background-color: #50a14f;
```
```
  color: white;
```
```
  font-size: 18px;
```
```
  border-radius: 5px;
```

  animation: slideIn 2s ease-in-out forwards;

  animation-delay: 2s; /* Ritardo di 2 secondi */

```
}
```

Contenuto Esempio: animation-delay

Prova questo esempio

DEMO

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

CSS animation-delay

La proprietà CSS3 animation-delay definisce il ritardo prima che inizi un'animazione

Sintassi

Significato dei valori principali:

Esempio proprietà: animation-delay

Supporto Browser

Follow us

Quick Links

Information

Contact Information