How to change css properties after a certain time using JS?

Question

css

Good afternoon!
The issue is that there are two divs containing phone numbers

<div id="tel_free" style="display=block;">88007777777</div>
<div id="tel_city" style="display=none;">[phone]</div>

after a certain time, say 2 seconds, you need to get this look:

<div id="tel_free" style="display=none;">88007777777</div>
<div id="tel_city" style="display=block;">[phone]</div>

if possible then with animation in the form of fading would be ideal.
I figured out the change in the properties of the element, but I can’t figure out how to fasten the timer and the attenuation.

document.getElementById('tel_free').style.display='none'; document.getElementById('tel_city').style.display='block';

Thank you.

Answer 1

To work with a timer, look towards setTimeout() or setInterval()
javascript.ru/settimeout