ARTICLE AD BOX
Firstly, you don't want to use innerHTML if you're just putting text in there. The reason is that if someone has reserved characters, or even script in their username, they can hijack your page. Use textContent instead.
Next, you have the right idea, but it's probably easiest/best to show/hide after the timing. You can do this with CSS animations, or with some simple script:
const usernameEl = document.querySelector('.username'); usernameEl.style.visibility = false; usernameEl.textContent = 'some username'; setTimeout(() => usernameEl.style.visibility = true, 5000); setTimeout(() => usernameEl.style.visibility = false, 10_000);Note that if you're timing this with an animation video, you might consider using the currentTime of that video to set the trigger, in case, the video buffers or plays at a different rate than expected. You might also consider setting the z-index so that your animation overlay displays on top no matter what, and then you don't need to worry about the visibility of the username.
