Dall'archivio script > HTML5

Usare le transizioni di CSS3 per dare un feeedback alla pressione di un pulsante

di Stefano MostardaStefano Mostarda, in HTML5, CSS3,

Con l'introduzione di CSS3 abbiamo la possibilità di creare transizioni per dare un'animazione agli oggetti in maniera nativa e quindi senza utilizzare framework di terze parti. Grazie a questa caratteristica possiamo decidere quali proprietà di un oggetto animare e quanto tempo far durare l'animazione facendo così in modo che la transizione da un valore all'altro della proprietà sia animata.
In questo script vediamo come ridurre le dimensioni di un pulsante nel momento in cui l'utente lo preme

<html>
<head>
  <style type="text/css">
    .box {
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align:center;
      -moz-transition:200ms;
      -webkit-transition:200ms;
      transition:200ms;
    }
    .box:active {
      transform: scale(0.9, 0.9);
    }
  </style>
</head>
<body>
  <input type="button" class="box" value="text"/>
</body>
</html>

La classe CSS box ha la proprietà transition (inclusi i prefissi per i diversi vendor) che specifica che le animazioni durano 200 millisecondi. Non avendo specificato quali proprietà vogliamo animare, tutte le proprietà sono automaticamente animate. Nella classe col selettore active (che si attiva quando l'utente preme il pulsante) specifichiamo che il pulsante deve ridurre le proprie dimensioni del 10%.
Grazie alla prorietà CSS transition, questa riduzione sarà animata e durerà 200 millisecondi.

Commenti

Visualizza/aggiungi commenti

| Condividi su: LinkedIn, Facebook
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi