css实现文字左右滚动效果

<div className={styles.rotaryContainer}>
  <div className={styles.rotaryBlockFirst}>
    注释：自2019年7月起，这是一段很长的文本文本文本文本文本文本文本文本文本文本文本文本文本文本,                    
    本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。
  </div>
  <div className={styles.rotaryBlockSecond}>
    注释：自2019年7月起，这是一段很长的文本文本文本文本文本文本文本文本文本文本文本文本文本文本,                    
    本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。
  </div
</div>

.rotaryContainer{
    background-color: yellow;
    color: red;
    height: 30px;
    margin-top: 10px;
    line-height: 30px;
    overflow: hidden;
    position: relative;
}

.rotaryBlockFirst {
    animation: rotaryBlockFirst 20s linear infinite;
    white-space: nowrap;
    position: absolute;
    width: 100%;
}

.rotaryBlockSecond {
    animation: rotaryBlockSecond 20s linear infinite;
    position: absolute;
    white-space: nowrap;
    width: 100%;
}

@keyframes rotaryBlockFirst {
    0% { left: 0; }
    100% { left: -110%;}
}

@keyframes rotaryBlockSecond {
    0% { left: 110%; }
    100% { left: 0; }
}
@media screen and (max-width: 1250px) {
    @keyframes rotaryBlockFirst {
        0% { left: 0; }
        100% { left: -1200px;} /*1200px为文本的长度，利用多媒体查询，当屏幕宽度太小时，就设置滚动距离为文本的长度*/
    }

    @keyframes rotaryBlockSecond {
        0% { left: 1200px; }
        100% { left: 0; }
    }
}