CSS Ticker Animation

Question

I have never use css animations before, so I just want to know, is this the 'best' way to animate a Ticker? I 'best' in this case encompasses efficient and semantic use of html and css.

It's worth noting that I intend to add extra functionality to this, such as manual scrolling back and forth. Is this set up ok for extending with javascript or is something here too temperamental?

Basic functionality is, Tweets scroll from right to left. When you put your mouse on one the scrolling stops and the tweet expands, and the time posted appears.

JSFiddle to see it in action

HTML:

<span id="controller">
    <span id="ticker">
        <span id="tweet">test </span>
        <span id="tweet">
            <img src="http://goo.gl/NpDXFs"></img>
            <div id="text">
                <span id="username">@Something</span>
                <span id="extra_info">3m</span>
                <div id="content">content</div>
            </div>
        </span>
    </span>
</span>

CSS:

#controller {
    background-color: blue;
    display: inline-block;
    position: absolute;
    width: 100%;
}
#controller:hover #ticker {
    -webkit-animation-play-state: paused
}
#ticker {
    -webkit-animation: move_eye 6s linear 0s infinite normal;

}
@-webkit-keyframes move_eye {
    from {
        margin-left:110%;
    }
    to {
        margin-left:-50%;
    }
    90% {
    }
}
#text{
    display: inline-block;
}
#tweet {
    box-sizing: border-box;
    background-color: white;
    display: inline-block;
    position: relative;
    border-radius:5px;
    margin: 0px 1px;
    padding: 0px 3px;
}
#tweet:hover {
    font-size: 120%;
}
#tweet:hover #extra_info {
    display: inline-block;
}
#tweet:hover img {
        width: 40px;
        height: 40px;
}
#extra_info {
    display: none;
}

img{
    width: 30px;
    height: 30px;
}

Answer 1

• If you are targetting styles for more than one element, then consider using class instead of id.

• Block elements cannot be inside inline elements. <div> can't be inside <span>

• <img> is a self-closing tag. No need for a </img> though you need to end it with />

• 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:

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

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;
}