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
La sintassi è la seguente:
Io non so che dire apparte WOW, Abbiamo un animazione funzionante.
Ovviamente dobbiamo farlo per ogni browser adesso
Wow, bello, ma adesso? Adesso cosa viene animato?
Aspettate, dobbiamo ancora specificarlo
Ecco la sintassi
ovvero:
animation: [Nome dato al animazione] [durata animazione] [ripetizione animazione]
Novamente aggiungiamo i prefissi
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
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
}
}
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{...}
@-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;
}
-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
.
