안녕하세요~^^

아래 예제 코드를 참고하여 적용해보시겠어요?

<style>
    /* 스타일을 자유롭게 수정할 수 있습니다. */
    .scrolling-text-container {
        position: relative;
        width: 300px;
        height: 200px;
        overflow: hidden;
        border: 1px solid #ccc;
    }
    
    .scrolling-text {
        position: absolute;
        top: 0;
        left: 0;
        animation: scrollText 10s linear infinite;
    }
    
    @keyframes scrollText {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(-100%);
        }
    }
</style>

<div class="scrolling-text-container">
    <div class="scrolling-text">
        <!-- 텍스트를 원하는 만큼 추가할 수 있습니다. -->
        <p>텍스트 1</p>
        <p>텍스트 2</p>
        <p>텍스트 3</p>
    </div>
</div>

<script>
    // JavaScript로 텍스트를 자동으로 올려주는 기능을 추가합니다.
    window.addEventListener('DOMContentLoaded', function() {
        var scrollingText = document.querySelector('.scrolling-text');
        var scrollingTextHeight = scrollingText.clientHeight;
        var containerHeight = scrollingText.parentElement.clientHeight;
        var animationDuration = scrollingTextHeight / containerHeight * 10;

        scrollingText.style.animationDuration = animationDuration + 's';
    });
</script>

고맙습니다.