Question

我有一个动画的div，可以在屏幕上平滑移动。这个div包含来自我网站的“最新消息”，其宽度取决于标题，所以我不能事先设置它。我的问题是，当标题太长时，动画需要太多时间来启动并在结束后循环。有没有办法让第一个完成时我的动画循环？这是我现在的代码：

HTML

<div class="marquee">
    <div>
        <a href="#" class="moduleItemTitle">Test Text 1 Test Text 1 Test Text 1 Test Text 1 Test Text 1</a>
        <span style="float: left;">&nbsp;&nbsp;|&nbsp;&nbsp;</span>
        <a href="#" class="moduleItemTitle">Test Text 2 Test Text 2 Test Text 2 Test Text 2 Test Text 2</a>
        <span style="float: left;">&nbsp;&nbsp;|&nbsp;&nbsp;</span>
        <a href="#" class="moduleItemTitle">Test Text 3 Test Text 3 Test Text 3 Test Text 3 Test Text 3</a>
        <span style="float: left;">&nbsp;&nbsp;|&nbsp;&nbsp;</span>
        <a href="#" class="moduleItemTitle">Test Text 4 Test Text 4 Test Text 4 Test Text 4 Test Text 4</a>
        <span style="float: left;">&nbsp;&nbsp;|&nbsp;&nbsp;</span>
     </div>
</div>

CSS

.marquee {
 height: 50px;   
 overflow: hidden;
 position: relative;
 background-color: #000;
}

.marquee div {
 font-family: Verdana;
 color:#fff;
 font-size:24px;
 position: absolute;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;

 width: -webkit-max-content;
 width: -moz-max-content;
 width: max-content;
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);       
 transform:translateX(100%);

 -moz-animation: example1 40s linear infinite;
 -webkit-animation: example1 40s linear infinite;
 animation: example1 40s linear infinite;
}

.marquee div a{
float: left;
color: #fff;
}

.marquee div span:last-child{
display: none;
}

@keyframes example1 {
 0%   {
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%);                 
 }

 100% {
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%);
 }
}

jsfiddle

在一个干净的循环中动画CSS中的div

0 个答案: