css 질문

<style>
    @keyframes fadeInRight {
        0% {
            opacity: 0;
            transform: translate3d(100%, 0, 0);
        }
        to {
            opacity: 1;
            transform: translateZ(0);
        }
    }
 
    .test_obj {
        position: relative;
        animation: fadeInRight 1s;
    }
</style>
 
<div class="test_obj">테스트 중입니다.</div>

위 처러하면 글자가 우측에서 좌측으로 이동합니다 

그런데  여기서 1초 이따가 아래로 한 100ox 만큼 위치이동하려면 어떠게 

해야 하는 걸까요?