JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrap">
    <div class="ani_1_in">
        <div class="ani_1_1">
            <div class="ani_1_2">
                <img src="img/nuko-9_TP_V4.jpg">
            </div>
        </div>
    </div>
    <div class="marquee">
        <p> </p><!-- ここにスペース入れないと赤い部分が表示されません… -->
    </div>
</div>

CSS

.wrap{
    position: relative;
}
.ani_1_in{
    width: 500px;
}
.ani_1_in img{
    width:500px;
    height:auto;
}
.marquee{
    position: absolute;
    top: 0;
}
.marquee p {
    background:red;
    margin:0;
    width:400px;
    height:350px;
    padding-left:300px;
    display:inline-block;
    white-space:nowrap;
    animation-name:marquee; 
    animation-timing-function:ease;
    animation-duration:2s; 
    animation-iteration-count:infinite;
    animation-iteration-count:1;
}
@keyframes marquee {
    from   { transform: translate(0%);} 
    99%,to { transform: translate(-100%);}
}

JavaScript

$(function() {
  $('.ani_1_2').hide();
  $('.marquee p').hide();
  setTimeout(function(){
    $('.marquee p').fadeIn(200);
     setTimeout(function(){
       $('.ani_1_2').fadeIn(100);
     },200);
   },1000);
});