सीएसएस ओवरफ्लो छुपा

Question

के साथ div कंटेनर में बाएं से दाएं पाठ को एनिमेट करें, इसलिए मैंने हाल ही में कुछ निजी प्रोजेक्ट पर काम किया है, और चूंकि मैं एक बड़ा सीएसएस प्रशंसक हूं, इसलिए मैं जावास्क्रिप्ट की बजाय सीएसएस में अधिकांश एनिमेशन करना चाहता हूं। मुझे लगता है कि इस सीएसएस एनिमेशन के साथ संभव हो सकता है Text moving from left to right

:

आज मैं कुछ इस तरह बनाना चाहता था। सिद्धांत रूप में, मेरे पास स्थिति के साथ एक div wrapper है: सापेक्ष, एक निश्चित चौड़ाई और अतिप्रवाह: छुपा। अंदर, स्थिति के साथ एक div है: पूर्ण और बाएं: 0 और नीचे: 0। अब कुछ मामलों में, पाठ पैरेंट div के लिए बहुत लंबा है, और मैं पाठ पाठ को "फ्लोट" देना चाहता था, हालांकि मूल div: वास्तव में div से div को एनिमेट करना: 0 से दाएं: 0।

मैं कुछ सीएसएस एनिमेशन पर ठोकर खाई और बच्चे div पर इस

@keyframes floatText{ 
    from { 
    left: 0; 
    } 

    to { 
    right: 0; 
    } 
} 

की कोशिश की। और निश्चित रूप से यह काम नहीं किया। बाएं से एनिमेशन: 0 से बाएं: -100 पीएक्स काम, लेकिन यह सुनिश्चित नहीं करता है कि पूरा पाठ दिखाई दे रहा है, जब यह उन अतिरिक्त 100px से अधिक लंबा हो। क्या यह काम करने के लिए कोई अच्छा और साफ तरीका है? निश्चित रूप से जावास्क्रिप्ट इस वांछित कार्यक्षमता को रॉक कर सकता है। लेकिन मैं जानना चाहता था कि शुद्ध सीएसएस में ऐसा करने का कोई तरीका है या नहीं।

अग्रिम धन्यवाद!

संपादित करें:

मेरे मन में मैं क्या है clearify करने के लिए, मैं एक gif क्या मैं CSS एनिमेशन के साथ पूरा करने के लिए ही दर्शायी बना लिया है: Animated

जैसा कि आप देख, हम तीन है एक दूसरे के बगल में, कुछ के पास एक नाम है जो सीधे फिट बैठता है, कुछ अन्य बहुत लंबे हो सकते हैं और उन्हें आगे और पीछे एनिमेटेड होना चाहिए, ताकि उपयोगकर्ता इसे पढ़ सकें :)!

फिर से धन्यवाद!

EDIT2:

वहाँ कुछ इस तरह पूरा करने के लिए एक तरीका है?

@keyframes floatText{ 
    from { 
    left: 0px; 
    } 

    to { 
    left: (-this.width+parent.width)px; 
    } 
} 

यह परम समाधान हो सकता है, मुझे पता है कि कोडिंग के इस प्रकार सीएसएस में संभव नहीं है, लेकिन शायद calc() या कुछ और की तरह कुछ CSS3 तोड़ मरोड़ के साथ? अब मैं विचारों से बाहर हूँ :(

Answer 1

सीएसएस

div { 
    position: relative; 
    animation: animate 5s; 
    animation-direction: alternate; 
    } 
@keyframes animate { 
    0% {left: 0px;} 
    25% {left: 20px;} 
    50% {left: 50px;} 
    75% {left: 100px;} 
    100% {left: 150px;} 
} 

आप अधिक% और पिक्सल मूल्यों जोड़कर एनीमेशन अधिक चिकनी कर सकते हैं
संपादित:। क्षमा करें, सिर्फ उस चित्र को देख आपने लिंक किया और देखा कि आप इसे आगे बढ़ने के लिए नीचे जाना चाहते थे। left: 0px;top: 10px; या फिर भी आप इसे किसी दिए गए% पर स्थानांतरित करना चाहते हैं।

Answer 2

चिकनी के लिए एनीमेशन में आसानी से जोड़ें एसएस, और इसे बाएं या दाएं स्थानांतरित करने के लिए पीएक्स के बजाय% का उपयोग करें।

Answer 3

हाय दोस्त मैं कोशिश की है इस

नोट: लेकिन आप एक बात याद आ रही है मिलेगा और है कि एनीमेशन विशुद्ध रूप से छोड़ दिया और सही मेरा मतलब आप नहीं कर सकते देखने के लिए तक पहुँच नहीं होगा देखेंगे div का पूरा पाठ।

और उस का मूल्य की वजह से है छोड़ दिया और सही मैं -100 और 100 तो को निर्धारित किया है क्योंकि मैं कि इतने

अधिकार के लिए विकल्प नहीं मिल सका अब यह देखने की कोशिश कर रहा है कि आप यह कैसे कर सकते हैं।

और यहाँ मेरी कोशिश

div.main_div{ 
 
    margin:0; 
 
    padding:0; 
 
    width: 20%; 
 
    height: 60%; 
 
    background-color:grey;  
 
    position:absolute; 
 
    overflow: hidden; 
 
} 
 
div.transparent_div{ 
 
    width:100%; 
 
    height:50px; 
 
    bottom:0; 
 
    background:red; 
 
    position:absolute; 
 
} 
 
div.text_wrapper{  
 
    height:50px; 
 
    bottom:0; 
 
    z-index:10; 
 
    background:transparent; 
 
    white-space: nowrap; 
 
    font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
 
    color:white; 
 
    font-size:2em; 
 
    vertical-align: middle; 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
       -moz-transition: all 0.3s ease-in-out; 
 
       -o-transition: all 0.3s ease-in-out; 
 
       -ms-transition: all 0.3s ease-in-out; 
 
    position:absolute; 
 
    -webkit-animation: anim 1.5s infinite; 
 
    animation: anim 1.5s infinite; 
 
    animation-direction: alternate-reverse; 
 
    -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */ 
 
    animation-timing-function: linear; 
 
} 
 

 
@-webkit-keyframes anim { 
 
    from { 
 
     left: -100%;   
 
    } 
 
    to { 
 
     left:100%; 
 
    } 
 
} 
 

 
@keyframes anim { 
 
    from { 
 
     left: -100%; 
 
    } 
 
    to { 
 
     left:100%; 
 
    } 
 
}

<body> 
 
<div class="main_div"> 
 
    <div class="text_wrapper">Hiii i am going right to left infinete times and here are the news 
 
    </div> 
 
    <div class="transparent_div"></div> 
 
</div> 
 
</body>

है और यहां आप ऊपर काम कर कोड

DEMO CODE

Answer 4

ग के डेमो बाहर की जाँच कर सकते हैं परिवर्तित करें %

में अपने-फ़्रेम मूल्य इस

body{ 
 
    overflow: hidden; 
 
} 
 
p{ 
 
    position: absolute; 
 
    white-space: nowrap; 
 
    animation: floatText 5s infinite alternate ease-in-out; 
 
} 
 

 
@-webkit-keyframes floatText{ 
 
    from { 
 
    left: 00%; 
 
    } 
 

 
    to { 
 
    /* left: auto; */ 
 
    left: 100%; 
 
    } 
 
}

<p>hello text</p>