۝ OraWeb.it ۝ animation-name

CSS animation-name

La proprietà CSS3 animation-name assegna un nome all'animazione

La proprietà animation-name consente di assegnare un nome a un'animazione definita tramite la regola @keyframes. Questo nome deve corrispondere al nome che hai dato nell'istruzione @keyframes e permette di applicare l'animazione a un elemento. È una delle proprietà principali per utilizzare le animazioni in CSS, in quanto stabilisce quale animazione applicare a un elemento specifico.

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

Sintassi

animation-name: name;

Significato dei valori principali:

name: il nome che si assegna all'animazione, che deve corrispondere a un nome definito nella dichiarazione @keyframes.

Esempio proprietà: animation-name

Codice Esempio: animation-name

CODE: CSS preleva codice

/* Definizione dell'animazione e del nome */

```
@keyframes pulse {
```
```
  0% {
```
```
    transform: scale(1);
```
```
    background-color: #0077cc;
```
```
  }
```
```
  50% {
```
```
    transform: scale(1.2);
```
```
    background-color: #00bcd4;
```
```
  }
```
```
  100% {
```
```
    transform: scale(1);
```
```
    background-color: #0077cc;
```
```
  }
```
```
}
```
```
 
```
```
.animated-box {
```
```
  display: inline-block;
```
```
  padding: 20px 40px;
```
```
  background-color: #0077cc;
```
```
  color: white;
```
```
  font-size: 18px;
```
```
  border-radius: 8px;
```

  animation-name: pulse; /* Nome dell'animazione */

```
  animation-duration: 1s;
```
```
  animation-iteration-count: 1;
```

  animation-timing-function: ease-in-out;

```
}
```

Contenuto Esempio: animation-name

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-name

La proprietà CSS3 animation-name assegna un nome all'animazione

Sintassi

Significato dei valori principali:

Esempio proprietà: animation-name

Supporto Browser

Follow us

Quick Links

Information

Contact Information