Grazie alla creazione di fotogrammi chiave nel nostro CSS possiamo animare qualsiasi parte della pagina Web. Una volta creato fotogrammi chiave nel foglio di stile, diventano disponibili per il riutilizzo come molti elementi della pagina come si desidera. Dissolvenza testo in CSS richiede un codice di fotogrammi chiave che imposta l’opacità al massimo a un certo punto l’animazione e cambia a una piena trasparenza in un altro punto.
@ -webkit-Fotogrammi chiave fade-text {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
@ -moz-Fotogrammi chiave fade-text {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
fading_text {
-webkit-animation: fade-text 10s infinita;
-moz-animation: fade-text 10s infinita;
}
