Il questo tutorial impareremo ad usare il
keyframes.
Ancora una volta ci ritroveremo a lavorare con i prefissi.
Certo, potremo usare le transizioni combinate con un dei intervalli di javascript. Ma ecco una lista di ottimi motivi per il quale usare le animazioni
- Browser che usano antialiasing, perdono un sacco di memoria nel cambiare tra ottimizzazione qualità e non se usiamo Js
- Usando Css, la pagina rimane piu leggera
- Si possono calcolare meglio i tempi
È piu Figo
La sintassi è la seguente:
CODICE
@keyframes NOMEAIMAZIONE{
0%{
color:red
}
50%{
color:green
}
75%{
color:blue
}
100%{
color:red
}
}
Io non so che dire apparte WOW, Abbiamo un animazione funzionante.
Ovviamente dobbiamo farlo per ogni browser adesso
CODICE
@-webkit-keyframes NOMEANIMAZIONE{...}
@-moz-keyframes NOMEANIMAZIONE{...}
@-o-keyframes NOMEANIMAZIONE{...}
@-ms-keyframes NOMEANIMAZIONE{...}
@keyframes NOMEANIMAZIONE{...}
Wow, bello, ma adesso? Adesso cosa viene animato?
Aspettate, dobbiamo ancora specificarlo
Ecco la sintassi
CODICE
p{animation:NOMEANIMAZIONE 5s infinite}
ovvero:
animation: [Nome dato al animazione] [durata animazione] [ripetizione animazione]
Novamente aggiungiamo i prefissi
CODICE
p{
-webkit-animation:NOMEANIMAZIONE 5s infinite;
-moz-animation:NOMEANIMAZIONE 5s infinite;
-o-animation:NOMEANIMAZIONE 5s infinite;
-ms-animation:NOMEANIMAZIONE 5s infinite;
animation:NOMEANIMAZIONE 5s infinite;
}
Ecco fatto, con questo codice si possono tranquillamente creare slideshows. Un mio compagno di classe ha usato le animazioni, per creare uno sfondo che cambiasse continuamente con l'opacità.
I modi come applicare questa tecnica sono molti e sono utili le remote cose.
Un carissimo saluto
Flexlex
