CSS Ticker Animation
If you are targetting styles for more than one element, then consider using class instead of id.
Block elements cannot be inside inline elements. &lt;div&gt; can't be inside &lt;span&gt;
&lt;img&gt; is a self-closing tag. No need for a &lt;/img&gt; though you need to end it with /&gt;
Put some padding on your containers. They look awful when they all stick to the edge.
I have read somewhere that increasing the size on hover is awful CSS. Consider putting focus by changing the background color, or changing the font color or putting an outline in a subtle way.
Constrain the slider by putting overflow:hidden on the container. That way you don't have that horrible scrollbar at the bottom.
Use transform instead of margin. As far as I know, the new CSS3 properties are hardware accelerated (or were those just the 3D), so they're smoother.
Also, transform's values are relative to the element itself and not the parent. While 100% margin (top or bottom) is equal to the parent container, 100% transform is the height (for y) and width (for x) of the element. This is useful especially when the slider is longer than the container.


Too long to list down what I did so here's the code instead:

HTML:

&lt;div id="controller"&gt;
    &lt;div id="ticker"&gt;
        &lt;div class="tweet"&gt;
            &lt;img src="http://goo.gl/NpDXFs" /&gt;
            &lt;div class="text"&gt;
                &lt;span class="username"&gt;@Something&lt;/span&gt;
                &lt;span class="extra_info"&gt;3m&lt;/span&gt;
                &lt;div class="content"&gt;content&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


CSS:

#controller {
    box-sizing: border-box;
    background-color: #06C;
    position: absolute;
    width: 100%;
    overflow:hidden;
}
#controller:hover #ticker {
    -webkit-animation-play-state: paused
}
#ticker {
    white-space: nowrap;
    -webkit-animation: move_eye 6s linear 0s infinite normal;
}
@-webkit-keyframes move_eye {
    from {
        -webkit-transform: translate(100%,0)
    }
    to {
        -webkit-transform: translate(-100%,0)
    }
    90% {
    }
}
.text {
    display:inline-block;
}
.tweet {
    box-sizing: border-box;
    background-color: #EEE;
    display: inline-block;
    border-radius:5px;
    padding: 5px 10px;;
    vertical-align: top;
    margin: 5px 2px;
    height: 100%;
}
.tweet:hover .extra_info {
    display: inline;
}
.extra_info {
    display: none;
}
img {
    display:inline-block;
    height: 30px;
}