HTML5 モバイルポップアップアニメーション効果

<div class="cute-barrage">
    <div class="barage-div">
        <img src="http://kw1-1253445850.file.myqcloud.com/static/image/stimg_7656dc02eb1cd13adbacbdd2695dc3a8.jpg"/>
        <span>January's chanting repayment period is here<i>hahaha</i></span>
    </div>
    <div class="barrage -div">
        <img src="http://kw1-1253445850.file.myqcloud.com/static/image/stimg_632fecdcb52417cb8ab89fa283e07281.jpg"/>
        <span>Sitting on the payroll<i>Ho-hum</i></span>
    </div>
    <div class="barrage -div">
        <img src="... /... /static/cutePresent/resource/avatar.png"/>
        <span>Become rich become rich<i>Yeah yeah yeah</i></span>
    </div>
</div>

html,body{
    width:100%;
}
.minute-barrage{
    width: 100%;
    height: 4rem; /* determine the length of the barrage*/
    position: absolute;
    top: 1.5rem; /*determine the height of the barrage*/
    left: 0;
    overflow-x: hidden; /* hide the horizontal part of the overflow*/
    .barage-div{
        position: absolute;
        top: 0;
        right: -100%; /*Make sure it starts on the outside of the interface, right is right from right to left, left is left from left to right*/
        height: 0.6rem;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 2rem;
        white-space: nowrap; /*make sure the content is displayed in one line, otherwise it will move to the end and break the line*/
        img{
            width: 0.5rem;
            height: 0.5rem;
            vertical-align: middle; //inline block element, center-aligned
            padding-left: 0.05rem;
            border-radius: 50%;
        }
        span{
            font-size: 14px;
            padding: 0 0.1rem;
            line-height: 0.6rem; //inline block element, center-align all four
            height: 0.6rem; //inline block element, one of the four missing elements must be centered
            display: inline-block; //inline block element, center-align all four missing elements
            vertical-align: middle; //inline block element, center-align four missing elements
            i{
                color: #fe5453;
                font-weight: 700;
            }
        }
    }
}

// popup
var winWidth = $(window).width(); //Get the screen width
$(".barage-div").each(function(index,value){ // iterate through each popup
    var width = $(value).width(); //Get the width of the current popup
    var topRandom = Math.floor(Math.random() * 3) + 'rem'; //Get a random number of 0,1,2 that can be changed as appropriate
    $(value).css({"right":-width,"top":topRandom}); //move the popup to the outside of the screen, just beyond
    //spell out the animation frame function, remembering that each ani should be differentiated and the width moved a full screen distance from its own negative width    
    var keyframes = `\    
        @keyframes ani${index}{   
            form{
                right:${-width}px;
            }
            to{
                right:${winWidth}px;
            }
        }\    
        @-webkit-keyframes ani${index}{
            form{
                right:${-width}px;
            }
            to{
                right:${winWidth}px;
            }
        }`;      
    // Add to the page inside the head tag
    $("<style>").attr("type","text/css").html(keyframes).appendTo($("head"));      
    // Define the animation speed list
    var aniList = [3,5,7,9,11];
    //take the random number of the array, 0,1,2,3,4
    var aniTime =Math.floor(Math.random() * 5);
    // add animation to the css when the full front popup
    //delay the time with each of * 1.5 times, this variable
    $(value).css({"animation":`ani${index} ${aniList[aniTime]}s linear ${index * 1.5}s`,"-webkit-animation":`ani${index } ${aniList[aniTime]}s linear ${index * 1.5}s`});
})