I'm trying to change the text of a div using keyframes with the code content:'text';, but unfortunately, the div remains empty and nothing happens.
The content inside the #neon-sign div is not updating and stays blank:
#neon-sign {
position: relative;
font-size: 12em;
color: var(--accent-color);
width: 100%;
text-align: center;
letter-spacing: 5px;
line-height: 0.80em;
font-family: 'Warnes', cursive;
-webkit-box-reflect: below 0 linear-gradient(transparent, #ff6f150e);
animation: changetext infinite 8s, neonanimate 5s linear infinite;
font-weight: 300;
content: '';
}
@keyframes changetext {
0% {
content: 'Hola';
}
20% {
content: 'Hello';
}
40% {
content: 'Salut';
}
60% {
content: 'Ciao';
}
80% {
content: 'Привет';
}
100% {
content: '你好';
}
}<div id="neon-sign"></div>