Запускать функцию JavaScript за другой через x Время

Я пытаюсь разработать простую анимацию с использованием SVG и JavaScript. У меня есть «кнопка», которая запускает функцию onclick, чтобы скрыть кнопку «Пуск» и запустить анимацию.

У меня проблемы с функцией временной развертки, в основном у меня есть «пузырьковое поле», в котором отображается текст, как если бы анимация разговаривала с пользователем, что-то вроде диалога, и через некоторое время этот текст исчезает и появляется новый один появляется на его месте.

Проблема в том, что после нажатия кнопки Пуск текст появляется на полсекунды, а затем исчезает. Предполагается, что он появится после нажатия кнопки «Пуск», а затем, например, через 5 секунд, он снова исчезнет.

это то, что я делал до сих пор, все находится внутри тега SVG.

 <rect id = "startButton" style = "cursor:pointer;" x = "200" y = "150" rx = "5" height = "25" width = "80" fill = "white" stroke = "white" stroke-width = "1" onclick = "startAni()"/>
    <text id = "startText" style = "cursor:pointer;" x = "215" y = "170" fill = "black" onclick = "startAni()">START</text>

    <script>
        function startAni(){

            document.getElementById("textLine1").style.display = "inline-block";
            document.getElementById("startButton").style.display = "none";
            document.getElementById("startText").style.display = "none";

            window.setTimeout(function(){textBubble(); 50000})

            function textBubble(){
                document.getElementById("textLine1").style.display = "none";

            }

        }
    </script>

а это "пузырчатая коробка"

<text id = "textLine1" x = "300" y = "175" fill = "white">WHY?</text>

что касается CSS, это то, что я получил для textLine1

#textLine1{
display:none;

}

Я согласен с новыми идеями о том, как это сделать, но я хотел бы работать с JavaScript, SVG или CSS. О JQuery не может быть и речи, но, поскольку я не знаком с ним, я не хотел бы использовать его сейчас.

Заранее спасибо.