div 容器上的动画

Question

我正在实现一个 twitter 代码。每条推文都是一个 div 容器（id 为 id="tweet1"、"tweet2" 等），其中包含多个其他 div 元素（这些 div 用于显示推文的状态、日期、时间、标签等）。所有这些推文都包含在最外层的 div 中，比如 id="twitter-feed"。

结构如下，

<div id="twitter-feed">....
    <div id="tweet1">....
        <div><div> //For image
        <div><div> // For status
    <div id="tweet2">....
        <div><div> //For image
        <div><div> // For status    
</div>

我想从左到右，一个接一个地为这些推文制作动画。

CSS 有，

#twitter-feed {
position:fixed;bottom:0;left:0;width:100%;font-size:50px;Background-color:#CD5C5C;
}

#twitter-feed div {
position:relative;color:yellow;animation:mymove 50s infinite linear;-webkit-animation:mymove 50s infinite linear;   
}

@keyframes mymove
{
from {left:0px;} 
to {left:100%;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:100%;}
}

我也有工作的 javascript 代码，它获取推文并填充 div 元素。

但是这段代码给出的输出是，

Tweet1....Animating from left to right...then New Line
Tweet2....Animating from left to right...then New Line 

我想知道，如何放置这些 div 以便推文一个接一个地出现，而不是一个接一个地出现。除了这些推文的显示方式外，其他一切都运行良好。

我正在使用以下链接中的代码。 Javascript 加载推文，我更改了#twitter-feed 的 CSS 代码。 The code which retrieves the tweets 如果您查看 Java 脚本，您会看到推文被填充为 div。

请帮忙。

谢谢， 佩尤什

Answer 1

基本上，您需要对其进行样式设置，以便它们内联。这就是我认为你的意思：http://jsfiddle.net/B6KbV/

如果是这样，这就是你需要的 css 明智：

#twitter-feed {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    font-size:50px;
    Background-color:#CD5C5C;
    white-space: nowrap;
}
#twitter-feed div {
    display: inline;
    position:relative;
    color:yellow;
    animation:mymove 50s infinite linear;
    -webkit-animation:mymove 50s infinite linear;
}
@keyframes mymove {
    from {
        left:0px;
    }
    to {
        left:100%;
    }
}
@-webkit-keyframes mymove
/*Safari and Chrome*/
 {
    from {
        left:0px;
    }
    to {
        left:100%;
    }
}

您需要display: inline 将其保持在同一行，white-space: nowrap; 以阻止文本进入下一行