CSS3字幕动画问题

我正在做一个股票行情器，进展顺利，但我的CSS有问题

股票行情器有一个选框，可以滚动，但不能完成一个周期。股票行情需要达到2米高（事实上是这样），但是由于股票列表非常广泛，它永远没有机会到达终点，因此大多数股票永远看不见

我很确定它与css:animation:marquee 10s linear infinite有关；因为字幕每10秒缩短一次。我附加了一个JSFIDLE，这样任何一个慷慨大方的人都可以进行实验

 .box {

    width: 100%;
    display: block;
    padding-top: 5px;
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
}
.floatleft2 {

    float:left;
    display: block;
    padding-top: 5px;
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: 12px;
}
.stockSymbolnew {
}
.stockWrapper {
    height: 2em;
    text-indent: -1000em;
    display: block;
    padding-top: 5px;
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
}
.stockSymbol {
    font-weight: 600;
}
.stockPrice {
    font-weight: 600;
    color: red;
}
.stockChange {
    font-weight: 600;
    color: green;
}
.stockTime {
    font-weight: 600;
    color: grey;
    font-size: smaller;
}
h2 {
    font-size: 1.5em;
}
p {
    margin-bottom: 0.5em;
}
.symbol {
    float: left;
    margin-right: 0px;
}
.symbol .name {
    display: block
}
.symbol.up {
    background: #70DB70
}
.symbol.up .change {
    color: green
}
.symbol.down {
    background: #f7cdc2
}
.symbol.down .change {
    color: red
}
#verticalScroller {
    position: absolute;
    width:268px;
    height: 2em;

    border: 0px solid red;
    overflow: hidden;
}
#verticalScroller > div {
    height: 2em;
    position:absolute;
    width:268px;
    border: 0px solid blue;
    overflow:hidden;
}
div.marquee > div > div > div:nth-child(odd) {
    background: #eee;
}
div.marquee > div > div > div {
    padding-right: 15px;
}
.container {
        height: 2em;
    margin: 1em auto;
    overflow: hidden;
    background: white;
    position: relative;
    box-sizing: border-box;
}
.marquee {
height: 2em;
    top: 6em;
    position: relative;
       animation-name: example;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation: marquee 10s linear infinite;
}
.marquee:hover {
    animation-play-state: paused;
}

@keyframes marquee {
    0% {
        top: 2em
    }
    100% {
        top: -11em
    }
}

问候

---

Sam

要显示的内容高度大于20em。如果将此值更改为825px，则显示所有库存。在那之后，时间不够，35秒应该可以

.marquee {
    top: 6em;
    position: relative;
    box-sizing: border-box;
    animation: marquee 35s linear infinite;
}

@keyframes marquee {
    0% {
        top: 2em
    }
    100% {
        top: -825px
    }
}

---

要显示的内容的高度大于20em。如果将此值更改为825px，则显示所有库存。在那之后，时间不够，35秒应该可以

.marquee {
    top: 6em;
    position: relative;
    box-sizing: border-box;
    animation: marquee 35s linear infinite;
}

@keyframes marquee {
    0% {
        top: 2em
    }
    100% {
        top: -825px
    }
}