Understanding the Marquee effect in CSS3 - html

Question

I though this would be quite easy to understand but i am having trouble getting to grips with it.....
I would like some text on the screen to be animated.
I would like the text to start on the far left within the wrapper, move left until the text has finished displaying and then move right again all within the defined wrapper size (a bit like a bounce effect).
I would like the overflow text to be hidden.
I would like this on a continuous loop.
I would like for this to display in all browsers correctly.
Here is where i have got to:
<style type="text/css">
#wrapper {
width: 450px;
height: 20px;
background-color: #FF0004;
}
.marquee {
overflow: hidden;
white-space: nowrap;
animation: marquee 3s linear infinite;
-webkit-marquee-style: alternate;
}
#keyframes marquee {
0% { text-indent: 0% }
100% { text-indent: -130% }
}
</style>
<div id="wrapper" class="marquee">marquee information marquee information marquee information marquee information</div>
</div>
Any help as ever would be greatly appreciated
Justin.

Answer 1

The code you posted in your question has some typos, I think. There's only one div which has both the wrapper ID and the marquee class.
Following is some code that I think achieves the desired effect. I don't think it'll work using the text-indent as you tried in your question because a percentage in a text-indent doesn't refer to the width of the containing element. I did it using position: relative and a fixed-width marquee element.
Here's a demo: http://codepen.io/Ghodmode/pen/tEDbk
You'll have to add the necessary browser prefixes. The demo relies on prefix-free for that.
HTML:
<div id="wrapper">
<div class="marquee">
<p>Marquee</p>
</div>
</div>
CSS:
#wrapper {
width: 450px;
background-color: #ff0004;
position: relative;
height: 20px;
line-height: 20px;
margin: 1em auto;
overflow: hidden;
}
div.marquee {
position: absolute;
width: 7em;
background-color: #bfb;
text-align: center;
animation-name: marquee;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
p {
margin: 0;
}
#keyframes marquee {
from {
left: 100%;
}
to {
left: -7em;
}
}

Answer 2

For starters, css3 marquee is only supported by webkit browsers at the moment. It would probably be better to use another method for cross-browser comparability such as javascript or jQuery.
Click Here for a great jQuery scroller.
If you still want to use css, here is the syntax for marquee:
-webkit-marquee: [direction] [increment] [repetition] [style] [speed];
You will also want to set overflow-x to -webkit-marquee:
overflow-x: -webkit-marquee;
Here is a version of your code that will work in webkit browsers such as chrome and safari:
<style>
.wrapper{
width: 450px;
height: 20px;
background-color: #FF0004;
}
.marquee{
white-space:nowrap;
-webkit-marquee: right small infinite alternate fast;
overflow-x: -webkit-marquee;
}
</style>
<div class="wrapper">
<div class="marquee">
marquee information marquee information marquee information marquee information marquee information marquee information marquee information
</div>
</div>