Animation does not end completely

Ask a question
0

I have a text slide but it finishes before sliding completely, the element with the texts is position: absolute and left: 100%. I apply an animation in it that goes from left: 100% to left: -100%, it was expected that all the element would move out of the right >> going out by the left, which in fact happens, but before the total displacement happens, the sliding ends.

* {
    margin: 0;
    padding: 0;
    font-family: sans-serif
}

.news-wrapper {
    height: 50px;
    position: relative;
    overflow: hidden;
    font-size: 25px;
    padding: 10px 0 0
}

.news-wrapper .footer-item {
    display: flex;
    color: #ffffff;
    background-color: rebeccapurple;
    list-style: none;
    left: 100%;
    position: absolute;
    animation: sliding 20s linear;
    white-space: nowrap
}

.news-item {
    margin-right: 100vw
}

.news-item:last-child {
    margin: 0
}

@keyframes sliding {
    100% {
        left: -100%
    }
}
<div class="news-wrapper">
  <ul class="footer-item">
    <li class="news-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. At, maxime?</li>
    <li class="news-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. At, maxime?</li>
    <li class="news-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. At, maxime?</li>
    <li class="news-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. At, maxime?</li>
  </ul>
</div>
offer bounty
add comment

0 Answer

Your Answer