CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

CSS @keyframes

La direttiva CSS3 @keyframes crea animazioni personalizzate

La direttiva @keyframes permette di definire il comportamento di un'animazione nei diversi momenti della sua esecuzione. Viene usata in combinazione con proprietà come animation-name e animation-duration per creare animazioni fluide e coinvolgenti.

Sintassi

@keyframes nome_animazione {
  percentuale { proprietà: valore; }
  ...
}

Significato dei valori principali:

  • nome_animazione: il nome dell’animazione, che sarà associato tramite la proprietà animation-name.

  • percentuali: punti temporali dell’animazione, come 0%, 100%, oppure from (equivale a 0%) e to (equivale a 100%).

  • proprietà CSS: definiscono lo stato dell’elemento in quel punto dell’animazione (es. transform, opacity, color).


Esempio proprietà: @keyframes


Codice Esempio: @keyframes

CODE: CSSpreleva codice
  1. .animated-box {
  2.   width: 100px;
  3.   height: 100px;
  4.   background-color: #50a14f;
  5.   position: relative;
  6.   animation-name: slideAndColor;
  7.   animation-duration: 3s;
  8.   animation-iteration-count: infinite;
  9. }
  10.  
  11. @keyframes slideAndColor {
  12.   0% {
  13.     left: 0;
  14.     background-color: #50a14f;
  15.   }
  16.   50% {
  17.     left: 200px;
  18.     background-color: #ff6347;
  19.   }
  20.   100% {
  21.     left: 0;
  22.     background-color: #50a14f;
  23.   }
  24. }

Contenuto Esempio: @keyframes

Esempio di utilizzo di @keyframes

In questo esempio, un box cambia colore e si sposta da sinistra verso destra:



CSS e HTML per l'esempio con @keyframes:

  
  <style>
    .animated-box {
      width: 100px;
      height: 100px;
      background-color: #50a14f;
      position: relative;
      animation-name: slideAndColor;
      animation-duration: 3s;
      animation-iteration-count: infinite;
    }

    @keyframes slideAndColor {
      0% {
        left: 0;
        background-color: #50a14f;
      }
      50% {
        left: 200px;
        background-color: #ff6347;
      }
      100% {
        left: 0;
        background-color: #50a14f;
      }
    }
  </style>

  <div class="animated-box"></div>
  

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

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies