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; }
    }
}