CSS-перемещение текста слева направо

Question

Я хочу создать анимированный HTML «бегущей строки», который прокручивает назад и вперед на сайте:

<div class="marquee">This is a marquee!</div> 

и CSS:

.marquee { 
    position: absolute; 
    white-space: nowrap; 
    -webkit-animation: rightThenLeft 4s linear; 
} 

@-webkit-keyframes rightThenLeft { 
    0% {left: 0%;} 
    50% {left: 100%;} 
    100% {left: 0%;} 
} 

Проблема это, шатер не останавливается, когда он достигает правого края экрана; он полностью перемещается с экрана (на короткое время появляется горизонтальная полоса прокрутки), а затем возвращается.

Итак, как мне сделать остановку выделения, когда ее правый край достигает правого края экрана?

EDIT: Как ни странно, это не работает:

50% {right: 0%} 

Answer 1

Как-то я получил его на работу, используя маржу-вправо, и установить его двигаться справа налево. http://jsfiddle.net/gXdMc/

Не знаю, почему для этого случая, правое правое 100% не выходит из экрана. : D (проверено на хром 18)

EDIT: Теперь слева направо работает слишком http://jsfiddle.net/6LhvL/

Answer 2

Если я понимаю вас вопрос правильно, вы можете создать оболочку вокруг своего шатра, а затем назначить width (или max-width) к элементу заворачивания. Например:

И затем #marquee-wrapper { width: x }.

Answer 3

Я не уверен, что это правильное решение, но я достиг этого путем переопределения класса .marquee сразу после анимации CSS.

Проверьте ниже:

<style> 
#marquee-wrapper{ 
    width:700px; 
    display:block; 
    border:1px solid red; 
} 

div.marquee{ 
width:100px; 
height:100px; 
background:red; 
position:relative; 
animation:myfirst 5s; 
-moz-animation:myfirst 5s; /* Firefox */ 
} 

@-moz-keyframes myfirst /* Firefox */{ 
0% {background:red; left:0px; top:0px;} 
100% {background:red; left:100%; top:0px} 
} 
div.marquee{ 
left:700px; top:0px 
} 
</style> 

<!-- HTMl COde --> 

<p><b>Note:</b> This example does not work in Internet Explorer and Opera.</p> 
<div id="marquee-wrapper"> 
<div class="marquee"></div> 

Answer 4

Привет вы можете добиться результата с использованием <marquee behavior="alternate"></marquee>

HTML

<div class="wrapper"> 
<marquee behavior="alternate"><span class="marquee">This is a marquee!</span></marquee> 
</div> 

CSS

.wrapper{ 
    max-width: 400px; 
    background: green; 
    height: 40px; 
    text-align: right; 
} 

.marquee { 
    background: red; 
    white-space: nowrap; 
    -webkit-animation: rightThenLeft 4s linear; 
} 

посмотреть демо: - http://jsfiddle.net/gXdMc/6/

Answer 5

Вы могли бы просто использовать CSS animated text generator. Есть уже созданные шаблоны

Answer 6

Мне нравится использовать следующее, чтобы не доходить до моих элементов div. Это также помогает с опрокидыванием CSS.

.marquee{ 
    overflow:hidden; 
} 

это будет скрывать все, что движется/находится за пределами DIV, который предохранит браузер расширяется и вызывает полоса прокрутки появляться.