सीएसएस चलती सही

Question

मैं "मार्की" है कि आगे और पीछे स्क्रॉल एक वेबसाइट पर एक एनिमेटेड एचटीएमएल बनाना चाहते हैं बाएं से पाठ:

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

और सीएसएस:

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

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

समस्या है, जब यह स्क्रीन के दाएं किनारे तक पहुंचता है तो मार्की रुकता नहीं है; यह स्क्रीन से सभी तरह से चलता है (एक क्षैतिज स्क्रॉल बार को संक्षिप्त रूप से प्रकट करता है) और फिर वापस आता है।

तो, जब मैं दाएं हाथ के किनारे स्क्रीन के दाईं ओर किनारे तक पहुंचता हूं तो मैं मार्की स्टॉप कैसे बना सकता हूं?

संपादित करें: अजीब तरह, यह काम नहीं करता:

50% {right: 0%} 

Answer 1

किसी तरह मैं मार्जिन-सही उपयोग कर, और दाईं से बाईं ओर ले जाने के लिए निर्धारित कर उसे काम करने के लिए मिल गया। http://jsfiddle.net/gXdMc/

पता नहीं क्यों इस मामले के लिए, मार्जिन-दाएं 100% स्क्रीन से नहीं निकलता है। : डी (क्रोम 18 पर परीक्षण)

संपादित करें: अब बाएं से दाएं भी काम करता है http://jsfiddle.net/6LhvL/

Answer 2

अगर मैं तुम्हें सही ढंग से सवाल को समझते हैं, तो आप अपने मार्की के चारों ओर एक आवरण बना सकते हैं और उसके बाद रैपिंग तत्व करने के लिए एक width (या max-width) आवंटित। उदाहरण के लिए:

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

और फिर #marquee-wrapper { width: x }।

Answer 3

मुझे यकीन नहीं है कि यह सही समाधान है, लेकिन मैंने एनीमेशन सीएसएस के बाद .marquee क्लास को फिर से परिभाषित करके हासिल किया है।

नीचे की जांच:

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

एचटीएमएल

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

उपयोग के साथ अपने परिणाम प्राप्त कर सकते हैं सीएसएस

.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 तत्वों के बाहर होने वाली चीज़ों को रोकने के लिए निम्न का उपयोग करना पसंद है। यह सीएसएस रोलओवर के साथ भी मदद करता है।

.marquee{ 
    overflow:hidden; 
} 

यह कुछ भी छिपाएगा जो div के बाहर/बाहर है जो ब्राउज़र को विस्तारित करने और स्क्रॉल बार प्रकट होने से रोक देगा।