नीचे की सीमा को एनिमेट करना (बाएं से दाएं)

Question

मैं नीचे की ओर बाएं से दाएं कोने की कोशिश कर रहा हूं। मैं इसे शीर्षक के नीचे सीधे स्थिति में नहीं लग रहा हूं और यह केंद्र से बाहर एनिमेट करता है। मुझे यकीन नहीं है कि क्या बदलना है।

https://jsfiddle.net/81uo76hx/2/

.slider { 
position: absolute; 
display:block; 
left: 50%; 
top:90%; 
transform: translate(-50%, 0); 
position:absolute; 
top:43%; 
margin:0 auto; 
height: 2px; 
background-color: #000; 
width: 0%; 
} 

Answer 1

आशा है कि आप जावास्क्रिप्ट के साथ कि एनीमेशन ट्रिगर करेगा, संक्रमण के साथ शुद्ध सीएसएस में कर सकते हैं, और right एनीमेशन के रूप में अतिरिक्त वर्ग के साथ 0 के लिए 100% से स्थापित करने transition: right 4s;

.slider है अब #name div के अंदर, इसलिए यह इसके साथ आगे बढ़ेगा और शीर्ष/बाएं इस पाठ के सापेक्ष

https://jsfiddle.net/0ou3o9rn/

सीएसएस एनीमेशन के साथ संस्करण (जावास्क्रिप्ट में animated वर्ग को जोड़ने, लेकिन आप इसे किसी भी तरह बाँध हॉवर करता है, या निर्माण पर अन्य घटना कर सकते हैं) https://jsfiddle.net/tto1vrz5/

Answer 2

यह मैं इसे कैसे करना होगा है। inline-block बच्चों के आस-पास कंटेनर बनाएं, केंद्र, फिर स्लाइडर को उस कंटेनर के बाईं ओर संरेखित करें।

$('.slider').animate({ 
 
    width: $('#name').width() 
 
}, 4000);

#splash { 
 
    text-align:center; 
 
    width:100%; 
 
    height:100%; 
 
} 
 
#splash:before { 
 
    content: ""; 
 
    height: 100%; 
 
} 
 
#splash:before, 
 
#wrp { 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
} 
 
#wrp { 
 
    text-align:left; 
 
    display:inline-block; 
 
} 
 
#name { 
 
    color:#000; 
 
    font-family:'Arial-BoldMT'; 
 
    font-weight:bold; 
 
    font-size:50px; 
 
    letter-spacing: -2px; 
 
    display:block; 
 
} 
 
.slider { 
 
    height: 2px; 
 
    background-color: #000; 
 
    width: 0; 
 
} 
 
html, body { margin: 0; height: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="splash"> 
 
    <div id="wrp"> 
 
     <span id="name">random title</span> 
 
     <div class="slider"></div> 
 
    </div> 
 
</div>

Answer 3

आप बाईं सेट कर सकते हैं jQuery के साथ समन्वय। फिर आपको अपने सीएसएस से ट्रांसफॉर्म को हटाने की जरूरत है। इस तरह:

$('.slider').css('left', $('#name').position().left).animate({ 
     width: $('#name').width() 
    }, 4000); 

.slider { 
    position: absolute; 
    display:block; 
    margin: 0 auto; 
    top:90%; 
    position:absolute; 
    top:43%; 
    margin:0 auto; 
    height: 2px; 
    background-color: #000; 
    width: 0%; 
} 

https://jsfiddle.net/mbz6okmf/

Answer 4

पाठ लपेटें और एक रिश्तेदार तैनात तत्व में स्लाइडर और स्लाइडर bottom: 0 निर्धारित किया है। यह टेक्स्ट के नीचे केंद्र से बाहर एनिमेट करेगा।

एचटीएमएल

<div id="splash"> 
    <div id="name"> 
     <div class="container"> 
      random title 
      <div class="slider"></div> 
     </div> 
    </div> 
</div> 

सीएसएस

#splash { 
    width:100%; 
    height:100%; 
    position:fixed; 
} 
.container { 
    position: relative; 
} 
.slider { 
    position: absolute; 
    left: 50%; 
    bottom: 0; 
    height: 2px; 
    background-color: #000; 
    width: 0%; 
    transform: translate(-50%, 0); 
} 
#name { 
    color:#000; 
    font-family:'Arial-BoldMT'; 
    font-weight:bold; 
    font-size:50px; 
    letter-spacing: -2px; 
    left: 50%; 
    transform: translate(-50%, 0); 
    position:absolute; 
    top:40%; 
    margin:0 auto; 
} 

JS Fiddle Demo

सेट स्लाइडर left: 0 और यदि आप बाएं से दाएं चेतन करने के लिए की जरूरत का अनुवाद को हटा दें।

JS Fiddle Demo