Question

我正在尝试重新创建一个AdMob横幅广告，其中我在一行上面有一个标题，在另一行下面有一个连续滚动内容的行 - 一行描述，一行链接等...

因此，对于第二行，我创建了一个包装div，并在其中包含<ul>列表，每行<li>：

<div class="details-wrapper">
    <ul>
        <li><p>Description LINE 1111</p></li>
        <li><p>Description LINE 2222</p></li>
        <li><p>Description LINE 1111</p></li>
    </ul>
</div>

最后一行类似于第一个原因我认为因为它必须进行连续滚动它应该向上滚动第三行并且跳转到第一行，所以移动看起来是无缝的。我设计了一切并创建了动画：

.details-wrapper, ul, li {height:22px; clear:both; overflow:hidden; position:relative;}
ul {position: absolute; -webkit-animation: mover 6s infinite linear forwards; overflow:visible; width: 100%;}
ul, li{margin:0;}
li {clear:both; list-style-type:none; display:table; vertical-align:middle; padding-left:14px; height:100%; width:100%;}
li p {display: table-cell; vertical-align: middle;}
li:first-child p, li:nth-child(2) p, li:nth-child(3) p {color:#46d200; font-size: 12px; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box; overflow:hidden; position: absolute; top: 50%; -webkit-transform: translateY(-50%);}
.icon-wrapper {
    width: 44px;
    height: 44px;
    float: right;
    margin: 3px;
}

@-webkit-keyframes mover {
    0%{top:0;}
    25%{top:0;}
    30%{top:-22px;}
    75%{top:-22px;}
    80%{top:-44px;}
}

当我在桌面Chrome中测试时 - 一切正常。但是一旦我在基于移动Webkit的浏览器中测试它 - 它会从最后一行向后滚动到第一行，而不会跳跃。

JSFiddle

为什么会发生这种情况？我该如何解决？

Answer 1

问题通过以下动画解决：

@-webkit-keyframes mover {
    0%{top:0;}
    20%{top:0;}
    30%{top:-22px;}
    70%{top:-22px;}
    80%{top:-44px;}
    100%{top:-44px;}
}

滚动`<ul>`动画</ul>

1 个答案: