Articles
Introduzione al CSS
Proprietà CSS relative alle animazioni

Proprietà CSS relative alle animazioni

Questo articolo spiega le proprietà CSS relative alle animazioni.

Puoi imparare l'uso e la sintassi delle proprietà @keyframes, animation e transition.

YouTube Video

HTML per Anteprima

css-animation.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-animation.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Animation</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Animation Related Properties</h2>
20        </header>
21        <article>
22            <h3>@keyframes</h3>
23            <section>
24                <h4>Animation Examples</h4>
25                <header><h4>animation: slide 3s ease infinite</h4></header>
26                <section class="sample-view">
27                    <div class="box-animation-slide">Slide Box</div>
28                </section>
29                <header><h4>animation: color-change 3s ease infinite</h4></header>
30                <section class="sample-view">
31                    <div class="box-animation-color-change">Color Change Box</div>
32                </section>
33                <header><h4>animation: fade 3s ease infinite</h4></header>
34                <section class="sample-view">
35                    <div class="box-animation-fade">Fade Box</div>
36                </section>
37            </section>
38        </article>
39        <article>
40            <h3>animation</h3>
41            <section>
42                <h4>Animation Examples</h4>
43                <header><h4>animation: slide 3s ease-in-out infinite</h4></header>
44                <section class="sample-view">
45                    <div class="box-animation-ease-in-out">Slide Box</div>
46                </section>
47                <header><h4>animation: color-change 3s ease-in-out 1s 3 alternate</h4></header>
48                <section class="sample-view">
49                    <div class="box-animation-alternate">Color Change Box</div>
50                </section>
51            </section>
52        </article>
53        <article>
54            <h3>transition</h3>
55            <section>
56                <h4>Transition Examples</h4>
57                <header><h4>transition: background-color 2s ease</h4></header>
58                <section class="sample-view">
59                    <div class="transition-box">Hover me!</div>
60                </section>
61                <header><h4>transition: background-color 5s ease, width 0.5s ease-in</h4></header>
62                <section class="sample-view">
63                    <div class="transition-2-properties">Hover me!</div>
64                </section>
65            </section>
66        </article>
67    </main>
68</body>
69</html>

Animazione e Transizione

Regola @keyframes 

 1/* Animation definition */
 2@keyframes slide {
 3    0% {
 4        transform: translateX(0);
 5    }
 6    50% {
 7        transform: translateX(200px);
 8    }
 9    100% {
10        transform: translateX(0);
11    }
12}
13
14/* Apply the animation */
15.box-animation-slide {
16    width: 100px;
17    height: 100px;
18    background-color: skyblue;
19    animation: slide 3s ease infinite;
20}

@keyframes è utilizzato nelle animazioni CSS per specificare come cambiano gli stili durante l'animazione. In @keyframes, i cambiamenti di stile dall'inizio alla fine dell'animazione sono specificati da percentuali di tempo o parole chiave (from e to).

  • Questo è un esempio di animazione in cui un elemento scorre da sinistra a destra e ritorna alla sua posizione originale.
  • In questo esempio, slide è scritto dopo @keyframes, definendo un'animazione chiamata slide.
  • 0% è l'inizio dell'animazione, con translateX(0) che posiziona l'elemento nella sua posizione originale.
  • 50% rappresenta la metà dell'animazione, dove l'elemento si sposta di 200px verso destra utilizzando translateX(200px).
  • 100% è la fine dell'animazione, con l'elemento che ritorna alla sua posizione originale.
  • Nella classe box-animation-slide, la proprietà animation viene utilizzata per applicare l'animazione slide a intervalli di 3 secondi.
 1@keyframes color-change {
 2    0% {
 3        background-color: red;
 4    }
 5    25% {
 6        background-color: blue;
 7    }
 8    50% {
 9        background-color: green;
10    }
11    75% {
12        background-color: yellow;
13    }
14    100% {
15        background-color: red;
16    }
17}
18
19.box-animation-color-change {
20    width: 100px;
21    height: 100px;
22    background-color: skyblue;
23    animation: color-change 3s ease infinite;
24}
  • Puoi controllare in modo preciso gli stili durante un'animazione. Specificando percentuali, puoi applicare stili diversi a intervalli temporali arbitrari.
    • In questo esempio, il colore cambia gradualmente da rosso a blu a verde a giallo e ritorna a rosso.
 1@keyframes fade {
 2    from {
 3        opacity: 0;
 4    }
 5    to {
 6        opacity: 1;
 7    }
 8}
 9
10.box-animation-fade {
11    width: 100px;
12    height: 100px;
13    background-color: blue;
14    animation: fade 3s ease infinite;
15}
  • In questo esempio, from è equivalente a 0% e to è equivalente a 100%. Questo ti consente di definire animazioni semplici.

Sintassi di Base 

 1@keyframes animation-name {
 2    0% {
 3        /* Style at the start */
 4    }
 5    50% {
 6        /* Style at the midpoint */
 7    }
 8    100% {
 9        /* Style at the end */
10    }
11}
  • animation-name: Il nome dell'animazione. Questo viene specificato utilizzando la proprietà animation o la proprietà animation-name.
  • Percentuali o Parole chiave: Usa percentuali da 0% a 100%, oppure le parole chiave from (equivalente a 0%) e to (equivalente a 100%).

Proprietà animation 

1.box-animation-ease-in-out {
2    width: 100px;
3    height: 100px;
4    background-color: skyblue;
5    animation: slide 3s ease-in-out infinite;
6}

La proprietà animation viene utilizzata per applicare animazioni a un elemento. Le animazioni definiscono come un set di stili CSS cambia nel tempo. Con la proprietà animation, puoi controllare la tempistica, il comportamento, il ritardo, il numero di ripetizioni e altro ancora di un'animazione.

  • La classe box-animation-ease-in-out specifica slide come animation-name e utilizza l'animazione slide definita in @keyframes.
    • 3s è la animation-duration, il che significa che ogni ciclo di animazione si completa in 3 secondi.
    • ease-in-out è la animation-timing-function, che fa iniziare l'animazione lentamente, accelera e poi rallenta di nuovo alla fine.
    • infinite è il animation-iteration-count, il che significa che l'animazione si ripeterà all'infinito.
1.box-animation-alternate {
2    width: 100px;
3    height: 100px;
4    background-color: skyblue;
5    animation: color-change 3s ease-in-out 1s 3 alternate;
6}
  • La classe box-animation-alternate specifica color-change come animation-name e utilizza l'animazione color-change definita in @keyframes.
    • 1s, che segue ease-in-out, è il animation-delay, specifica il ritardo prima che inizi l'animazione. L'animazione inizierà dopo 1 secondo.
    • 3, che segue 1s, è il animation-iteration-count, significa che l'animazione si ripete 3 volte.
    • alternate è il animation-direction, che specifica la direzione della riproduzione dell'animazione. alternate specifica che l'animazione viene riprodotta in modo alternato.

Composizione della proprietà animation.

La proprietà animation è una proprietà abbreviata che combina diverse sotto-proprietà in una sola. Ecco le principali sotto-proprietà:.

  • La proprietà animation-name: specifica il nome dell'animazione da applicare. Deve corrispondere al nome dell'animazione definita in @keyframes.
  • La proprietà animation-duration: specifica il tempo necessario affinché l'animazione completi un ciclo. Le unità di tempo sono secondi (s) o millisecondi (ms).
  • La proprietà animation-timing-function: specifica la curva di velocità dell'animazione. Si utilizzano valori come ease, linear, ease-in, ease-out, ease-in-out, ecc.
    • Specificando ease, l'animazione inizia lentamente, accelera e poi rallenta di nuovo alla fine.
    • Specificando linear, l'animazione progredisce a velocità costante dall'inizio alla fine.
    • Specificando ease-in l'animazione inizia lentamente e termina rapidamente.
    • Specificando ease-out l'animazione inizia rapidamente e termina lentamente.
    • Specificando ease-in-out l'animazione inizia lentamente, progredisce rapidamente e termina lentamente.
  • La proprietà animation-delay specifica il ritardo prima che inizi l'animazione. L'unità di tempo è in secondi o millisecondi.
  • La proprietà animation-iteration-count specifica il numero di volte in cui l'animazione deve ripetersi. Specificando infinite l'animazione si ripeterà indefinitamente.
  • La proprietà animation-direction specifica la direzione della riproduzione dell'animazione. Le opzioni includono normal (direzione avanti), reverse (direzione indietro), alternate (riproduzione alternata) e alternate-reverse (riproduzione alternata iniziando all'indietro).
  • La proprietà animation-fill-mode specifica lo stato dell'animazione prima che inizi e dopo che termina. È possibile specificare uno tra none, forwards, backwards o both.
  • La proprietà animation-play-state specifica se l'animazione è in esecuzione o in pausa. È possibile specificare running o paused.

Riepilogo

La proprietà animation è uno strumento potente per cambiare dinamicamente lo stile degli elementi. Utilizzando @keyframes, è possibile definire come gli stili cambiano nel tempo e controllare il comportamento dettagliato dell'animazione con ogni sotto-proprietà di animation.

Proprietà transition 

 1.transition-box {
 2    background-color: lightgray;
 3    transition: background-color 2s ease;
 4}
 5
 6.transition-box:hover {
 7    background-color: steelblue;
 8}
 9
10.transition-2-properties {
11    background-color: lightgray;
12    width: 150px;
13    height: 50px;
14    transition: background-color 5s ease, width 0.5s ease-in;
15}
16
17.transition-2-properties:hover {
18    background-color: blue;
19    width: 250px;
20}

La proprietà transition viene utilizzata per applicare effetti di animazione ai cambiamenti di stile CSS. Consente ai cambiamenti di avere un aspetto fluido durante i cambiamenti di stato come hover, focus, active o quando gli stili vengono modificati dinamicamente tramite JavaScript.

Vediamo un esempio della classe transition-box in cui il colore di sfondo cambia gradualmente quando si passa con il mouse su un pulsante. - Nella classe transition-box, la proprietà transition applica una transizione di 2 secondi al cambiamento del colore di sfondo. Il cambiamento è specificato come ease, rendendolo fluido. - La pseudo-classe hover cambia il colore di sfondo da lightgray a steelblue quando il mouse passa sopra il pulsante. Questo cambiamento avviene gradualmente nei 2 secondi specificati nella classe transition-box.

È possibile applicare transition a più proprietà contemporaneamente. - Nell'esempio della classe transition-2-properties, il colore di sfondo cambia in 5 secondi e la larghezza cambia in 0,5 secondi.

Sintassi di Base 

1/* Basic syntax of transition */
2transition: property duration timing-function delay;
  • property specifica a quali proprietà CSS dovrebbe essere applicata l'animazione. Specificando all, l'animazione si applica a tutte le proprietà.
  • duration specifica il tempo necessario per completare l'animazione. Specificare utilizzando secondi (s) o millisecondi (ms).
  • timing-function specifica il cambiamento di velocità dell'animazione. Puoi usare opzioni come ease, linear, ease-in, ease-out, ease-in-out, ecc.
  • delay specifica il tempo di attesa prima che inizi l'animazione. Specificare in secondi o millisecondi.

Proprietà dettagliate di transition 

1/* Detailed properties of transition */
2transition-property: background-color;
3transition-duration: 0.3s;
4transition-timing-function: ease;
5transition-delay: 500ms;

transition può essere utilizzato anche come singole proprietà nel modo seguente.

  • transition-property: Specifica la proprietà a cui si applica l'animazione.
  • transition-duration: Specifica la durata fino al completamento dell'animazione.
  • transition-timing-function: Specifica la velocità di progressione dell'animazione. Si possono usare opzioni come ease, linear, ease-in, ease-out, ease-in-out.
  • transition-delay: Specifica il tempo di attesa prima che inizi l'animazione.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video

Proprietà CSS relative agli effetti filtroProprietà CSS relative alle animazioni 3D