Sintassi

Come funziona:

• @starting-style viene usata per specificare lo stato *iniziale* di un elemento, che non fa parte dell’animazione vera e propria, ma è interpolato fino al primo keyframe.

• Questo consente di evitare scatti visivi tra il caricamento e l'inizio dell'animazione, soprattutto se il valore iniziale non è quello di default.

Esempio direttiva: @starting-style

Codice Esempio: @starting-style

CODE: CSS

1. .animate-in {

2.   animation: fadeSlideIn 1s ease-out forwards;

3. }

5. @keyframes fadeSlideIn {

6.   @starting-style {

7.     opacity: 0;

8.     transform: translateY(40px);

9.   }

10.   to {

11.     opacity: 1;

12.     transform: translateY(0);

13.   }

14. }

Contenuto Esempio: @starting-style

<style>
  .animate-in {
    animation: fadeSlideIn 1s ease-out forwards;
  }

  @keyframes fadeSlideIn {
    @starting-style {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
</style>

<div class="animate-in">
  Questo elemento entra con animazione fluida
</div>

⚠️ Nota compatibilità: È attualmente supportata solo da alcuni browser moderni (come Chrome da v115+ e Firefox da v117+ con flag o specifiche attivate).

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.

Supporto Browser