Непрерывный тикер Pure CSS

Я достиг тикера с чистым CSS, есть небольшая проблема, которую я не могу исправить.

Я хочу, чтобы тикер был непрерывным без пробелов. т.е. после того, как свиток "пункт 2" заканчивается, пункт "1" должен появиться немедленно.

В настоящее время, если вы заметили в скрипке, после последнего элемента в свитке много свободного места. Мне нужно, чтобы первый элемент появился сразу после последнего элемента в выделении.

    <style>

    .nochng {color:#333}
    .upchng {color:#00b300}
    .dwnchng{color:#cc0000}

    @-webkit-keyframes ticker {
    0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
    }
    100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    }
    }
    @keyframes ticker {
    0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
    }
    100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    }
    }
    .ticker-wrap {
    width: 100%;
    overflow: hidden;
    padding-left: 100%;
    }

    .ticker {
    display: inline-block;
    white-space: nowrap;
    padding-right: 100%;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-name: ticker;
    animation-name: ticker;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    }

    .ticker-wrap:hover .ticker {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
    }

    .ticker__item {
    display: inline-block;padding: 0 0.5rem;text-transform: uppercase;}
    .italic {font-style:italic;}
    </style>
    <div class="ticker-wrap">
    <div class="ticker">
    <div class="ticker__item"><span>Item1</span><span class="dwnchng"> Red <span class="italic">Color </span>&nbsp;<small>(inserted)</small>  </span></div>
    <div class="ticker__item"><span>Item2</span><span class="upchng"> Green <span class="italic">Color </span>&nbsp;<small>(inserted)</small>  </span></div>
    </div>

FIDDLE

0 ответов

Другие вопросы по тегам