Pubblicato il 24/02/2024 da alnao nella categoria Css3 & Bootstrap

Le trasformazioni e le transazioni sono delle tecniche introdotte con la terza versione di CSS che permettono di creare dinamicità in un pagine che risultano statici. Queste tecniche sono state studiate per poter permettere la definizione di animazioni senza l’ausilio di alcun linguaggio di scripting e senza conoscenze evolute di programmazione.

Secondo lo standard esistono tre tipi di tecniche che possono applicate:

  • trasformazioni: permette di modificare l’aspetto grafico lasciando invariata la sua posizione e le dimensioni originali
  • transazioni: permette di modificare l’aspetto grafico modificando anche posizione e/o le dimensioni
  • animazioni: permette di creare trasformazioni e transazioni che variano nel tempo con dei frame-set temporali

Le trasformazioni permettono di modificare l’aspetto di un elemento, il caso d’uso più semplice è quello di modificare l’aspetto di un testo rendendolo maiuscolo:

p.uppercase {
  text-transform: uppercase;
}

Ma il linguaggio CSS prevede una proprietà specifica “transform” che permette di ruotare, deformare e scalare elementi indicando il valore di rapporto di rotazione o dimensionamento:

div.a {
  transform: rotate(20deg);
}
div.b {
  transform: skewY(20deg);
}
div.c {
  transform: scaleY(1.5);
}

Inoltre è previsto una ulteriore proprietà che permette di definire il comportamento della trasformazione indicando se si tratta di un tipo piatto, 3d o natuale.

transform-style: flat|preserve-3d|initial|inherit;

Da notare che quasi tutti i broweser accettano questo tipo di trasformazione ma a volte si comportano in maniera diversa infatti sono usate le stesse unità di misura, si rimanda alla documentazione ufficiale per tutti i dettagli di questa proprietà


Le transazioni sono una evoluzioni delle trasformazioni in quanto permettono anche di definire modifica alle posizioni e alle dimensioni degli oggetti, la sintassi prevista è:

transition: property duration timing-function delay|initial|inherit;

per esempio volendo modififare in maniera dinamica la larghezza di un elemento al passaggio del mouse di definiscono due classi:

div.trans {
  width: 100px;
  transition: width 2s;
}
  div.trans:hover {
  width: 300px;
}

Un altro esempio molto usato è la transazione grafica di un input al momento del focus sull’elemento: evidenziare un elemento input quando l’utente lo seleziona:

input[type="text"] {
  width: 100px;
  -webkit-transition: width .35s ease-in-out;
  transition: width .35s ease-in-out;
}
input[type="text"]:focus {
  width: 250px;
}

Anche in questo caso è consigliato consultare la documentazione ufficiale per tutti i dettagli.


Le animazioni son un tema sempre molto scottante in quando abbelliscono molto un sito ma lo rendono anche molto pensate ed è sempre difficile trovare un equilibrio. Il linguaggio permette di definire transazioni di elementi con la proprietà che definisce il comportamento principale:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

che ha molti valori necessari nella definizione:

  • animation-name: specifica il nome dei keyframe
  • animation-duration: specifica quanti secondi deve durare la animazione
  • animation-timing-function: specifica la velocità di esecuzione
  • animation-delay: specifica quando delay/ritardo deve esserci
  • animation-iteration-count: specifica quante volte la animazione deve essere eseguita
  • animation-direction: specifica la direzione
  • animation-fill-mode: specifica il comportamento dell’elemento prima e dopo l’animazione
  • animation-play-state: specifica se l’animazione è attiva o meno

L’esempio più semplice è muovere un elmento in maniera continua definendo la sua animazione i keyframe di inizio e partenza:

div.anima {
  animation: mymove 5s infinite;
}
@keyframes mymove {
  from {left: 0px;}
  to {left: 200px;}
}

Anche in questo si rimanda sempre alla documentazione ufficiale per tutti i dettagli, questa tecnica permette di creare casi d’uso più complesso come il carosello dei loghi disponibile in questo sito (in alto a destra) realizzabile combinando le animazioni con piccolo Javascript:

div.logo {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: fading 10s infinite;
}
@keyframes fading{
  0%{opacity:0}
  50%{opacity:1}
  100%{opacity:0}
}

Una cosa interssante e molto usata è usare la tecnica delle animazioni per creare effetti che creano ombre e sfondi al testo, per esempio per creare un effetto Neon colorato ad un titolo:

.glow {
  font-size: 80px;
  color: #fff;
  text-align: center;
  animation: glow 1s ease-in-out infinite alternate;
}
@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}

Anche in questo caso si rimanda alla documentazione ufficiale per tutti i dettagli.

MENU