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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Reactive form tipizzati con modellazione del FormBuilder in Angular
Usare le variabili per personalizzare gli stili CSS
Utilizzare Tailwind CSS all'interno di React: installazione
Eseguire le GitHub Actions offline
Gestire domini wildcard in Azure Container Apps
Applicare il versioning ai nostri endpoint ASP.NET Core Minimal API
Trasformare qualsiasi backend in un servizio GraphQL con Azure API Management
Creare form tipizzati con Angular
Sfruttare MQTT in cloud e in edge con Azure Event Grid
Generare file per il download da Blazor WebAssembly
Effettuare il binding di date in Blazor