Анимация в контейнере div

Я реализую твиттер-тикер. Каждый твит представляет собой контейнер div (с идентификаторами, например, 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 загружает твиты, и я изменил код CSS для #twitter-feed. Код, который получает твиты Если у вас есть посмотрите на сценарий Java, вы увидите, что твиты заполнены как div.

Пожалуйста помоги.

Спасибо, Пиюш


containers html css tweets
person Peeyushpd    schedule 02.12.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

По сути, вам нужно стилизовать его так, чтобы они были встроенными. Я думаю, вы имеете в виду следующее: 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;, чтобы остановить переход текста на следующую строку.

person Hive7    schedule 02.12.2013
comment
Эй, спасибо за быстрый ответ. хочу почти такой же. Но у меня не работает свойство display:inline. Я использую код из приведенной ниже ссылки. Javascript загружает твиты, и я изменил код CSS для #twitter-feed. Код, который получает твиты Если у вас есть взгляните на сценарий Java, вы увидите, что твиты заполнены как div. - person Peeyushpd; 02.12.2013
comment
Извините, я не понимаю вопроса, извините за тупость. Что вы подразумеваете под отображением: встроенный не работает? - person Hive7; 02.12.2013
comment
Как уже упоминалось, display:inline должен держать несколько твитов в одной строке. Но для меня это не так. Они по-прежнему находятся на разных линиях. - person Peeyushpd; 02.12.2013
comment
в jsfiddle он работает нормально. Но не в коде по ссылке. - person Peeyushpd; 02.12.2013
comment
Это на одном из ваших сайтов, если это так, пожалуйста, могу ли я получить ссылку на сайт - person Hive7; 02.12.2013
comment
Я запускаю его на локальном хосте. :( Код как есть из ссылки, указанной в первом комментарии. За исключением изменений в CSS #twitter-feed. - person Peeyushpd; 02.12.2013