Nell’apprezzabile articolo pubblicato da David Rousset, su HTML5 Center, l’autore t’introduce nell’adozione della nuova sintassi CSS3 che riguarda le animazioni dei componenti con l’adozione del nuovo prefisso -ms per la piena compatibilità di tali contenuti con Internet Explorer 10. Il CSS3 e le sue pecualieri animazioni non sono concorrenti al linguaggio JavaScript, ma offrono l’opportunità di rimpiazzare alcune funzioni di base. Rousset desidera dimostrarti come con un puro CSS3 si possano ottenere risultati impressionanti per progettare non solo il design di un sito web, ma anche complessi giochi in HTML5. Concludo questo articolo mostrandoti come un semplice testo in html possa diventare intermittente, cambiando il suo colore dall’arancione al rosso, impiegando una semplice “funzione” CSS3.
Ecco il codice Standard W3C:
p{color:orange; animation:testo 2s; -moz-animation:testo 1s infinite; -webkit-animation:testo 1s infinite; -o-animation:testo 1s infinite; -ms-animation:testo 1s infinite;} /* proprietà del testo */
/* funzione CSS3 con i prefissi per la piena compatibilità con le ultime versioni dei più diffusi web browser */
@keyframes testo {from {color:orange;}to {color:red;}}
@-moz-keyframes testo {from {color:orange;}to {color:red}}
@-webkit-keyframes testo {from {color:orange;}to {color:red;}}
@-o-keyframes testo {from {color:orange;}to {color:red;}}
@-ms-keyframes testo{from {color:orange;} to {color:red;}}
Questo codice funziona con Internet Explorer 10!
Copia e incolla questo codice nell’editor html online offerto da Rendera.