CSS-di chuyển văn bản từ trái sang phải

Question

Tôi muốn tạo một HTML hoạt hình "vùng" mà cuộn lại trên một trang web:

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

và CSS:

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

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

Vấn đề là, vùng chọn không dừng lại khi nó chạm tới cạnh phải của màn hình; nó di chuyển tất cả các cách tắt màn hình (làm cho một thanh cuộn ngang xuất hiện, một thời gian ngắn) và sau đó trở lại.

Vì vậy, làm cách nào để làm cho vùng chọn dừng khi cạnh phải của nó chạm tới cạnh phải của màn hình?

EDIT: Nhưng kỳ lạ, điều này không làm việc:

50% {right: 0%} 

Answer 1

Bằng cách nào đó tôi đã nhận nó để làm việc bằng cách sử dụng margin-right, và thiết lập nó để di chuyển từ phải sang trái. http://jsfiddle.net/gXdMc/

Không biết tại sao trong trường hợp này, lề phải 100% không tắt màn hình. : D (thử nghiệm trên chrome 18)

EDIT: bây giờ trái sang phải làm việc quá http://jsfiddle.net/6LhvL/

Answer 2

Nếu tôi hiểu bạn hỏi một cách chính xác, bạn có thể tạo một wrapper xung quanh vùng của bạn và sau đó gán một width (hoặc max-width) đến các yếu tố gói. Ví dụ:

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

Và sau đó #marquee-wrapper { width: x }.

Answer 3

Tôi không chắc đây có phải là giải pháp đúng hay không nhưng tôi đã đạt được điều này bằng cách xác định lại lớp .marquee ngay sau CSS động.

Kiểm tra dưới đây:

<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

Hi bạn có thể đạt được kết quả của bạn với việc sử dụng <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; 
} 

xem minh họa: - http://jsfiddle.net/gXdMc/6/

Answer 5

Bạn chỉ có thể sử dụng CSS animated text generator. Có các mẫu được tạo trước đã là

Answer 6

Tôi thích sử dụng các yếu tố sau để ngăn mọi thứ bên ngoài các phần tử div của mình. Nó cũng hỗ trợ quá trình chuyển đổi CSS.

.marquee{ 
    overflow:hidden; 
} 

điều này sẽ ẩn mọi thứ di chuyển/nằm ngoài div, điều này sẽ ngăn trình duyệt mở rộng và làm thanh cuộn xuất hiện.