<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Text Growing and Shrinking</title>
</head>

<body>

    <div id="text">Text to be transformed</div>

    <script>
        let text = document.getElementById("text");

        let growing = true;
        let size = 5;

        let timer = setInterval(function() {

            if (growing) {

                text.innerHTML = "Text Growing";
                text.style.color = "red";

                size += 0.5;

                text.style.fontSize = size + "pt";

                if (size >= 50) {
                    growing = false;
                }

            } else {

                text.innerHTML = "Text Shrinking";
                text.style.color = "blue";

                size -= 0.5;

                text.style.fontSize = size + "pt";

                if (size <= 5) {
                    clearInterval(timer);
                }

            }

        }, 100);

    </script>

</body>

</html>