I CSS sono uno dei modi più potenti per rendere interattiva la pagina web. Trasforma l'aspetto e le sensazioni del nostro basic pagina web. Una delle caratteristiche importanti ed entusiasmanti che offre CSS è che ci consente di eseguire animazioni. Ci permette di spostare gli elementi all'interno della nostra pagina. Iniziamo il nostro viaggio delle animazioni in CSS nel seguente ordine:
Animazioni in CSS
L'aggiunta di animazioni al nostro sito Web è un ottimo modo per attirare l'attenzione degli utenti. Non solo aggiunge valore alla nostra pagina, ma arricchisce anche l'esperienza dell'utente. L'animazione in CSS si basa su due parti. Sono
- Fotogrammi chiave
- Animazione
Le animazioni CSS sono supportate in tutti i browser. Tuttavia, alcuni browser meno recenti come Safari (fino alla versione 8.0) richiedono il prefisso (-webkit-) per interpretare le proprietà dell'animazione. Per esempio:
.anim {altezza: 200 px larghezza: 200 px sfondo: azzurro posizione: relativo border-radius: 100% -webkit-animation-name: cssanim / * old browsers * / -webkit-animation-duration: 5s / * old browsers * / animation -name: cssanim animation-duration: 5s} / * vecchi browser * / @ -webkit-keyframes cssanim {0% {left: 0px} 100% {left: 300px}} @keyframes cssanim {0% {left: 0px} 100 % {left: 300px}}Possiamo utilizzare la pagina html di esempio dall'alto e sostituire il codice CSS nel tag di stile per provare ulteriori esempi.
Fotogrammi chiave in CSS
Questo è l'elemento costitutivo delle animazioni in CSS. È usato per definire momenti e stili specifici dell'animazione sulla nostra pagina web. In altre parole, quando specifichiamo i @keyframes all'interno del nostro CSS, ottiene il controllo per modificare lo stato corrente in un nuovo stato o animare gli oggetti per una certa durata.
I @keyframe devono avere determinate proprietà per controllare l'animazione, come il nome dell'animazione, le fasi e le proprietà.
come convertire un double in un int in java
Nome - È necessario un nome per ogni animazione per descriverne i comportamenti.
Fasi - Lo stage rappresenta il completamento di un'animazione. Può essere indicato con le parole chiave 'a' e 'da' o come percentuale, mentre 0% rappresenta lo stato iniziale e 100% rappresenta lo stato finale di un'animazione. Il vantaggio dell'utilizzo della rappresentazione percentuale è che possiamo definire più fasi intermedie tra di esse, ad esempio quale dovrebbe essere il comportamento dell'animazione allo stadio del 50% o del 75% ecc.
Proprietà - Queste proprietà ci danno il controllo sui @keyframes per manipolarli durante l'animazione.
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-duration: 5s} @keyframes cssanim {0% {transform: scale (0.5) opacity: 0} 50 % {transform: scale (1.5) opacity: 1} 100% {transform: scale (1)}}Ora poiché siamo chiari sulla definizione dei fotogrammi chiave. Esploriamo le proprietà dell'animazione, per descrivere come animare i nostri elementi e oggetti. Le due proprietà, ovvero inherit e initial, possono essere utilizzate con tutti i tipi di animazione. Queste proprietà vengono generalmente utilizzate insieme al tag div per mostrare comportamenti diversi.
iniziale: Imposta questa proprietà sul valore predefinito.
ereditare: Eredita questa proprietà dal suo elemento padre.
Proprietà dell'animazione
- nome dell'animazione
Specifica il nome dell'animazione, che viene utilizzato nei @keyframes per manipolare.I valori possibili sono:
- nome: Specifica il nome da associare al fotogramma chiave per l'animazione.
- nessuna: Questo è il valore predefinito e può essere utilizzato per sostituire le animazioni ereditate o sovrapposte.
Sintassi:
nome-animazione: nome | nessuno | iniziale | ereditare
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-duration: 5s} @keyframes cssanim {0% {left: 0px} 100% {left: 300px} }- durata dell'animazione
Specifica il tempo impiegato da un'animazione per completare un'esecuzione. È definito in secondi o millisecondi (ad esempio, 4s o 400ms). Il valore predefinito di questa proprietà è 0s, quindi se questa proprietà non è specificata, l'animazione non avrà luogo.
Sintassi:
durata dell'animazione: tempo
.anim {height: 200px width: 200px background: blue position: relative border-radius: 100% animation-name: cssanim animation-duration: 4s} @keyframes cssanim {0% {transform: scale (0.4) opacity: 0} 50 % {transform: scale (1.4) opacity: 1} 100% {transform: scale (1)}}- ritardo dell'animazione
La proprietà animation-delay ci permette di specificare il ritardo nell'animazione. Definisce quando inizierà l'esecuzione di una sequenza di animazione.
Il valore di questa proprietà può essere dichiarato in secondi o millisecondi (ms). Può contenere valori sia positivi che negativi. Un valore positivo indica che l'animazione inizierà dopo che è trascorso il tempo specificato e fino ad allora rimarrà inanimata. D'altra parte, un valore negativo avvierà immediatamente l'animazione dal punto come se fosse già stata eseguita per un periodo di tempo specificato.
Sintassi:
ritardo dell'animazione: tempo
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-duration: 4s animation-delay: 4s} @keyframes cssanim {0% {left: 0px} 100% {left: 250px}}- conteggio delle iterazioni dell'animazione
Questa proprietà indica il numero di volte in cui deve essere riprodotta una sequenza di animazione. Il valore predefinito di questa proprietà è 1.I valori possibili sono:
- numero - indica il numero di iterazioni
- infinito - indica che l'animazione dovrebbe ripetersi per sempre
Sintassi:
conteggio-iterazione-animazione: numero | infinito
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-duration: 2s animation-iteration-count: 4} @keyframes cssanim {0% {left: 0px} 100% {left: 100px}}- direzione dell'animazione
Definisce la direzione dell'animazione. La direzione dell'elemento può essere impostata per giocare in avanti, indietro o in cicli alternati.Il valore predefinito di questa proprietà è normale e viene ripristinato ad ogni ciclo.I valori possibili sono:
normale - Questo è il comportamento predefinito e l'animazione viene riprodotta in avanti. Dopo ogni ciclo l'animazione torna al suo stato iniziale e viene riprodotta di nuovo in avanti
inversione - L'animazione viene riprodotta all'indietro. Dopo ogni ciclo l'animazione arriva al suo stato finale e viene riprodotta all'indietro
alternato - La direzione dell'animazione è invertita, ovvero viene riprodotta prima in avanti e poi all'indietro ad ogni ciclo. Ogni ciclo dispari rende l'animazione in avanti e ogni ciclo pari esegue il movimento all'indietro.
alternato-inverso - La direzione dell'animazione viene invertita alternativamente. Qui l'animazione viene riprodotta prima all'indietro e poi in avanti ad ogni ciclo. Ogni ciclo dispari si muove all'indietro o all'indietro e ogni ciclo pari riproduce un'animazione in avanti.
Sintassi:
direzione animazione: normale | retromarcia |alternativo | alternato-inverso
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-duration: 2s animation-iteration-count: infinite} @keyframes cssanim {0% {left: 0px} 100% {left: 100px}}- funzione di temporizzazione dell'animazione
Questa proprietà determina la curva di velocità o lo stile di movimento dell'animazione. Viene assegnato per rendere fluida la modifica dello stile di animazione da una forma all'altra. Se non viene assegnato alcun valore, il valore predefinito è easy.I possibili valori per la funzione di temporizzazione dell'animazione sono:
facilità - Questo è il valore predefinito della proprietà. Qui l'animazione inizia lentamente, diventa gradualmente veloce nel mezzo e poi finisce di nuovo lentamente.
lineare - L'animazione mantiene la stessa velocità per tutto il ciclo, cioè dall'inizio alla fine.
facilità - L'animazione inizia lentamente.
disinvoltura - L'animazione termina lentamente.
facilità in uscita - L'animazione si muove lentamente sia all'inizio che alla fine.
cubic-bezier (n, n, n, n) - Questa funzionalità avanzata ci consente di creare una funzione di temporizzazione personalizzata definendo i nostri valori. Il valore possibile è compreso tra 0 e 1.
Sintassi:
funzione di temporizzazione dell'animazione: lineare | facilità | facilità fuori | facilità in | facilità in uscita |cubic-bezier (n, n, n, n)
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-duration: 2s animation-direction: reverse} @keyframes cssanim {0% {background: orange left: 0px } 50% {background: yellow left: 200px top: 200px} 100% {background: blue left: 100px}}- modalità riempimento animazione
Questa è una proprietà speciale in quanto determina lo stile dell'animazione prima o dopo la riproduzione dell'animazione.Per impostazione predefinita, lo stile dell'elemento non è influenzato dall'animazione prima dell'inizio o dopo la sua fine. Questa proprietà è utile in quanto aiuta a sovrascrivere questo comportamento predefinito dell'animazione.Di seguito sono riportati i possibili valori per la proprietà della modalità di riempimento dell'animazione:
nessuna - Questo è il valore predefinito della proprietà, ovvero gli stili di animazione non vengono applicati all'elemento, prima o dopo l'animazione.
avanti - Gli stili vengono mantenuti dall'elemento nella sequenza di animazione finale, ovvero al termine dell'animazione.
indietro - Gli stili vengono mantenuti dall'elemento nella sequenza di animazione iniziale, ovvero prima che l'animazione venga avviata, in particolare durante il ritardo dell'animazione.
tutti e due - Ciò significa che l'animazione seguirà in entrambe le direzioni, cioè avanti e indietro
Sintassi:
modalità di riempimento animazione: nessuna | avanti | indietro | tutti e due
.anim {width: 50px height: 50px background: lightblue color: white font-weight: bold position: relative animation-name: cssanim animation-duration: 5s animation-iteration-count: infinite border-radius: 100%} # anim1 { animation-timing-function: ease} # anim2 {animation-timing-function: linear} # anim3 {animation-timing-function: ease-in} # anim4 {animation-timing-function: ease-out} # anim5 {animation- funzione di temporizzazione: facilità-in-uscita} @keyframes cssanim {da {left: 0px} a {left: 400px}}- stato di riproduzione dell'animazione
Questa proprietà specifica che un'animazione sia in riproduzione o in pausa. Inoltre, quando un'animazione viene ripresa dalla pausa, inizia dal punto in cui era stata interrotta.I valori possibili sono:
- giocando - Per rendere l'animazione in esecuzione
- messo in pausa - Per rendere l'animazione in stato di pausa.
Sintassi:
stato-riproduzione-animazione: in pausa | giocando
.anim {width: 100px height: 100px background: lightblue position: relative animation-name: cssanim animation-duration: 3s animation-delay: 2s animation-fill-mode: backwards border-radius: 100%} @keyframes cssanim {0% {top: 0px background-color: orange} 50% {top: 0px background-color: green} 100% {top: 100pxbackground-color: blue}}- animazione
Questa è nota come proprietà abbreviazione di animazione. Viene utilizzato per il codice più pulito. Una volta che ci siamo abituati a tutte le proprietà di animazione, si consiglia di utilizzare l'abbreviazione di animazione per codificare più velocemente e definire tutte le proprietà in una singola riga.
Sintassi:
animazione: [nome-animazione] | [durata dell'animazione] | [funzione di temporizzazione dell'animazione] |[ritardo dell'animazione] | [conteggio-iterazione-animazione] | [direzione animazione] |[modalità riempimento animazione] | [stato di riproduzione dell'animazione]
Tutti gli effetti di animazione che mostriamo sopra utilizzando diverse proprietà di animazione possono essere ottenuti utilizzando la scorciatoiaanimazione proprietà.
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-duration: 2s animation-direction: normal animation-play-state: paused} @keyframes cssanim {0% {background: orange top: 0px} 50% {background: yellow left: 200px top: 200px} 100% {background: blue left: 100px}}Questo conclude tutte le proprietà di animazione che possono essere utilizzate in CSS. Dovremmo provare diverse varianti di queste proprietà per ottenere un'immagine più chiara. Quando ci sentiamo a nostro agio, la proprietà stenografia dell'animazione può essere di grande aiuto per scrivere codice più pulito e veloce. Questa è una delle abilità importanti da apprendere in CSS per gli sviluppatori web. Dal momento che tendiamo a concentrarci maggiormente sugli oggetti in movimento piuttosto che su quelli statici, le animazioni possono aiutarci a raggiungere questo obiettivo e anche a sviluppare pagine web straordinarie.
Dai un'occhiata al nostro che viene fornito con formazione dal vivo con istruttore e esperienza di progetto nella vita reale. Questa formazione ti consente di acquisire competenze per lavorare con tecnologie web back-end e front-end. Include formazione su sviluppo Web, jQuery, Angular, NodeJS, ExpressJS e MongoDB.
operatore di risoluzione dell'ambito c ++
Hai domande per noi? Per favore, menzionalo nella sezione commenti del blog 'Animazioni in CSS' e ti ricontatteremo.