Controllo dell'animazione CSS3 con la funzione steps ()

L'animazione è una delle maggiori funzionalità introdotte nei CSS. In passato, l'animazione web era disponibile solo nel territorio JavaScript o Flash. Ma oggi molti siti web scelgono di usare i CSS per aggiungere animazioni sottili . Negli articoli precedenti, abbiamo analizzato come fare cose interessanti con l'animazione CSS come aggiungere un effetto di selezione e aggiungere effetti di rimbalzo a qualcosa.

In questo articolo, ci immergeremo nuovamente nell'animazione CSS. Questa volta, discuteremo di una funzione di animazione CSS, steps(), che ci consente di controllare il movimento dell'animazione : non spaventare, non è così sconcertante come sembra. Diamo un'occhiata.

Quindi, cos'è?

Normalmente, l'animazione in CSS andrà direttamente dall'inizio alla fine alla durata specificata. steps() fa parte della funzione di timing dell'animazione. Ci consente di controllare l'animazione per spostarla gradualmente. L'esempio migliore che mostra come funzionano i steps() sarebbe la seconda mano di un orologio analogico; la lancetta dei secondi non si muove continuamente, invece i suoi movimenti sono divisi in stadi. Quindi replichiamo con animazione CSS e steps() .

Replicare la lancetta dei secondi di un orologio

Aggiungiamo innanzitutto i fotogrammi chiave che ruotano la lancetta dei secondi per 360 gradi; la rotazione inizierà a 90 gradi (o alle 12). Nota che il seguente codice potrebbe aver bisogno di un prefisso ( -moz-, -o- e -ms- ) per funzionare su tutti i browser.

 @ -webkit-keyframes rotation {from {transform: ruotare (90 gradi); } a {transform: ruotare (450deg); }} 

La lancetta dei secondi si muoverà costantemente ogni secondo e completerà una rotazione di 360 gradi in 60 secondi. Quindi, qui imposteremo la durata dell'animazione per 60s e questo dice al browser di completarlo in 60 passi con steps(60) come questo.

 .second {animation: rotation 60s steps (60) infinito; trasformazione-origine: 100% 50%; // styles decoration background-color: # e45341; altezza: 2px; margin-top: -1px; posizione: assoluta; superiore: 50%; larghezza: 50%; } 

Abbiamo creato due demo per questo; uno con steps() e uno con linear . Puoi vedere le diverse mosse da questa schermata qui sotto.

A questo punto, si spera, puoi capire e immaginare come funziona steps() . Per vedere la demo in azione, segui questo link qui sotto.

• Visualizza la demo
• Scarica fonte

Più ispirazione ...

Inoltre, qui abbiamo raccolto alcuni fantastici esperimenti e dimostrazioni che sfruttano i steps() di molti sviluppatori web. Controllali e spero che tu possa trarre ispirazione da loro.

• Pure CSS3 digitando animazione con steps () di Lea Verou
• Cat Walk di Rachel Nabors
• Ken's Street Fighter II di David Walsh

Snapchat e Instagram influenzano la gioventù mentalmente, dice lo studio

La domanda se internet fa male alla salute ha preso una nuova svolta verso i siti di social media. Utile anche se i social media possono essere, si scopre che non tutto in esso può essere buono come uno studio pubblicato di recente mostra che i social media possono avere effetti negativi su quelli che sono giovani .

(Consigli tecnici e di design)

Aggiunta e rimozione di classi HTML su richiesta con jQuery

L'aggiunta di una nuova classe HTML è un gioco da ragazzi; basta aprire il documento HTML, individuare ciò che si desidera aggiungere, inserire e assegnare un nome alla classe. Tuttavia, quando si tratta di creare un sito Web interattivo che consente ai visitatori di interagire con esso, potrebbe essere necessario modificare, inserire e rimuovere le classi HTML su richiesta.P

(Consigli tecnici e di design)