如何修复导致高 CLS Google Page Speed 数字的动画

Question

我的网站上有这个动画，效果很好。 问题是，当我在 pagespeed 上检查我的网站时，他们似乎不喜欢这种效果。

.contBachecaHiGift {
    width: 100%;
    font-size: 14px;
    height: 36px;
    color: #c03022;
    position: absolute;
    top: 0;
    left: 0;
}

.contBachecaHiGift .dynamic-text {
    list-style: none;
    position: absolute;
    overflow: hidden;
    height: 36px;
    margin: 0 auto;
    left: 0;
    right: 0;
    font-weight: 700;
}

ul>li, ol>li {
    margin-top: 0;
    margin-bottom: 1rem;
}

.contBachecaHiGift .dynamic-text .item {
    position: relative;

    -webkit-animation: move 15s linear 0s infinite;
    animation: move 15s linear 0s infinite;
    width: 100%;
    text-align: center;
}



@-webkit-keyframes moveHP {
  0% {-webkit-transform: translate(700px,0);}
  100% {-webkit-transform: translate(-1200px,0);}
}
@keyframes moveHP {
  0% {-webkit-transform: translate(700px,0);}
  100% {-webkit-transform: translate(-1200px,0);}
}

@-webkit-keyframes move{
  0% {top: 2px;}
  10% {top: 2px;}
  20% {top: -30px;}
  30% {top: -30px;}
  40% {top: -30px;}
  50% {top: 2px;}
  60% {top: 2px;}
  70% {top: 2px;}
  80% {top: -30px;}
  90% {top: -30px;}
  100% {top: 2px;}
 }
@keyframes move{
  0% {top: 2px;}
  10% {top: 2px;}
  20% {top: -30px;}
  30% {top: -30px;}
  40% {top: -30px;}
  50% {top: 2px;}
  60% {top: 2px;}
  70% {top: 2px;}
  80% {top: -30px;}
  90% {top: -30px;}
  100% {top: 2px;}
}

<div class="text-container contBachecaHiGift">
  <ul class="dynamic-text">
    <!-- TESTO PER LE PROMO -->
    <li class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</li>
    <li class="item">incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</li>
    <li class="item">nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</li>
  </ul>
</div>

我该如何修复 CLS？ 怎么才能横放呢？