动画(Animations)CSS3

La funzionalità di animazione CSS3 ti permette di creare animazioni basate su keyframe.

Creare animazione CSS3

Nel capitolo precedente, hai già imparato come eseguire animazioni semplici, ad esempio animare un attributo da un valore a un altro utilizzando la funzionalità di transizione CSS3. Tuttavia, le transizioni CSS3 sono quasi impossibili da controllare durante l'animazione.

CSS3 animazione va oltre l'animazione basata su keyframe, permettendoti di specificare i cambiamenti nel tempo delle proprietà CSS come un insieme di keyframe, ad esempio animazione Flash.

Creare un'animazione CSS è un processo a due passaggi, come mostrato negli esempi seguenti:

• Il primo passo per costruire un'animazione CSS è definire i vari keyframes e utilizzare i keyframes per dare un nome all'animazione.

• Il secondo passo è utilizzare la proprietà animation-name per richiamare i keyframes per nome e aggiungere animation-duration e altri opzionaliProprietà dell'animazionespecificare il comportamento dell'animazione.

Ma non è necessario definire le regole delle keyframes prima di citare o applicare le regole delle keyframes. L'esempio seguente ti mostrerà come utilizzare le funzionalità di animazione CSS3 per<div>L'animazione di una casella viene impostata da una posizione orizzontale a un'altra posizione.

.box {
　　　　width: 50px;
　　　　height: 50px;
　　　　background: red;
　　　　position: relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation-name: moveit;
　　　　-webkit-animation-duration: 2s;
　　　　
　　　　animation-name: moveit;
　　　　animation-duration: 2s;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes moveit {
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes moveit {
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

Devi specificare almeno due attributi animation-name e animation-duration (maggiore di 0) per eseguire l'animazione. Ma tutti gli altriProprietà dell'animazionesono opzionali, perché i loro valori predefiniti non impediscono l'esecuzione dell'animazione.

Definire i frame chiave

I frame chiave vengono utilizzati per specificare i valori delle proprietà dell'animazione in ogni fase dell'animazione. I frame chiave sono definiti utilizzando iRegola CSSSpecificato da -@keyframes. Il selettore del frame chiave della regola di stile del frame chiave inizia con un percentuale (%) o una parola chiave da (uguale a 0%) a (uguale a 100%). Il selettore viene utilizzato per specificare la posizione di costruzione del frame chiave durante l'animazione.

I percentuali rappresentano la percentuale della durata dell'animazione, 0% rappresenta l'inizio dell'animazione, 100% rappresenta la fine, 50% rappresenta il punto medio, ecc. Questo significa che il frame chiave del 50% in un'animazione di 2s sarà equivalente a 1s.

.box {
　　　　width: 50px;
　　　　height: 50px;
　　　　margin: 100px;
　　　　background: red;
　　　　position: relative;
　　　　left: 0;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation-name: shakeit;
　　　　-webkit-animation-duration: 2s;
　　　　
　　　　animation-name: shakeit;
　　　　animation-duration: 2s;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes shakeit {
　　　　12.5% {left: -50px;}
　　　　25% {left: 50px;}
　　　　37.5% {left: -25px;}
　　　　50% {left: 25px;}
　　　　62.5% {left: -10px;}
　　　　75% {left: 10px;}
}
　
@keyframes shakeit {
　　　　12.5% {left: -50px;}
　　　　25% {left: 50px;}
　　　　37.5% {left: -25px;}
　　　　50% {left: 25px;}
　　　　62.5% {left: -10px;}
　　　　75% {left: 10px;}
}

Attributi abbreviati dell'animazione

Molti attributi devono essere considerati quando si crea un'animazione. Ma è anche possibile specificare tutti gli attributi dell'animazione in un singolo attributo, per abbreviare il codice.

L'attributo animation è un attributo abbreviato che viene utilizzato per impostare in successione tutti i singoliProprietà dell'animazione。Ad esempio：

.box {
　　　　width: 50px;
　　　　height: 50px;
　　　　background: red;
　　　　position: relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation: repeatit 2s linear 0s infinite alternate;
　　　　
　　　　animation: repeatit 2s linear 0s infinite alternate;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes　repeatit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　repeatit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

属性动画CSS3

下表简要概述了所有与动画相关的属性。