jQuery: скрыть div при загрузке страницы и показать div с переходом

В настоящее время я работаю над проектом, и у меня возникают проблемы с текстом моего героя jQuery. Сценарий таков: когда страница загружается, текст не должен быть видимым, но когда он загружен, текст будет отображаться.

Вот мой код CSS:

.hero_description{
  visibility: hidden;
}

И вот мой JQuery:

jQuery(function($) {
    jQuery('.hero_description').show();
},2000);

Проблема в том, что он не показывает правильный переход, так как он рендерит первым вверху, и как только его другие стили CSS рендерится, он переходит на свое место в середине.