वहाँ सीएसएस एनिमेशन के साथ एक दीर्घवृत्त चेतन करने के लिए वैसे भी है?

Question

मैं एक दीर्घवृत्त चेतन करने की कोशिश कर रहा हूं, और सोच रहा था कि क्या यह सीएसएस एनिमेशन के साथ संभव था ...

तो ऐसा हो सकता है

Loading...
Loading..
Loading.
Loading...
Loading..

और मूल रूप से बस ऐसे ही जारी है। कोई विचार?

संपादित करें: इस तरह: http://playground.magicrising.de/demo/ellipsis.html

Comments

एनिमेशन ट्रांसफॉर्म नहीं हैं, बदलाव नहीं हैं। कृपया इन तीनों को मिलाएं नहीं।

— BoltClock

ऐसे ही एक सवाल का मेरा जवाब देखें: stackoverflow.com/a/24349758/282729

— feklee

Answer 1

@ Xec के उत्तर के थोड़े से संशोधित संस्करण के बारे में कैसे : http://codepen.io/thetallweeks/pen/yybGra

एचटीएमएल

तत्व में जोड़ा गया एक एकल वर्ग:

<div class="loading">Loading</div>

सीएसएस

एनीमेशन जो उपयोग करता है steps।MDN डॉक्स देखें

.loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4,end) 900ms infinite;      
  animation: ellipsis steps(4,end) 900ms infinite;
  content: "\2026"; /* ascii code for the ellipsis character */
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 20px;    
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 20px;    
  }
}

@ xec के उत्तर का डॉट्स पर स्लाइड-इन प्रभाव अधिक है, जबकि यह डॉट्स को तुरंत प्रदर्शित करने की अनुमति देता है।

Comments

मेरा मतलब है कि आपने इसका जवाब 3 साल बाद दिया लेकिन यह शायद बेहतर है।

— रे

@ xckpd7 yea, लेकिन मैंने आज इसे गुगली दिया और बस यही जवाब मिला। एसओ सिर्फ ओपी के लिए नहीं है, यह सभी के लिए एक संसाधन है!

— मैट पैरीला

@MattParrilla मैं ओपी हूं, और अगर आपने गौर किया तो मैंने उस टिप्पणी को स्वीकार करने से पहले इसका उत्तर बदल दिया।

— रे

यदि आप इसका उपयोग उस पाठ पर कर रहे हैं जो केंद्र में है या संरेखित है, तो मैं सुझाव देता हूं कि यदि आप एनीमेशन के दौरान अपने पाठ को स्थानांतरित नहीं करना चाहते हैं, तो एक प्रारंभिक margin-right(या पैडिंग) जोड़ सकते हैं 20pxऔर इसे एनिमेट कर रहे 0pxहैं।

— किमबॉल

1emजगह में की 20pxइस जवाब में सीएसएस बेहतर कार्य कर सकता

— जीवन टखर

Answer 2

आप animation-delay propertyप्रत्येक दीर्घवृत्त वर्ण का समय और उपयोग करने का प्रयास कर सकते हैं । इस मामले में मैंने प्रत्येक दीर्घवृत्त चरित्र को रखा है <span class>ताकि मैं उन्हें अलग से चेतन कर सकूं।

मैंने एक डेमो बनाया , जो बिल्कुल सही नहीं है, लेकिन यह कम से कम मेरा मतलब दिखाता है :)

मेरे उदाहरण से कोड:

एचटीएमएल

Loading<span class="one">.</span><span class="two">.</span><span class="three">.</span>​

सीएसएस

.one {
    opacity: 0;
    -webkit-animation: dot 1.3s infinite;
    -webkit-animation-delay: 0.0s;
    animation: dot 1.3s infinite;
    animation-delay: 0.0s;
}

.two {
    opacity: 0;
    -webkit-animation: dot 1.3s infinite;
    -webkit-animation-delay: 0.2s;
    animation: dot 1.3s infinite;
    animation-delay: 0.2s;
}

.three {
    opacity: 0;
    -webkit-animation: dot 1.3s infinite;
    -webkit-animation-delay: 0.3s;
    animation: dot 1.3s infinite;
    animation-delay: 0.3s;
}

@-webkit-keyframes dot {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes dot {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

Comments

मुझे यह विचार पसंद है और इस पर "मार्चिंग एलिप्स" दिखाने के लिए थोड़ा विस्तार किया गया है: jsfiddle.net/toddwprice/cRLMw

— टोड प्राइस

यह काम नहीं किया (;), इसलिए मैंने प्रदर्शन जोड़ा: इनलाइन; और फिर डॉट्स। क्या यह इस तरह से काम करना था? jsfiddle.net/cRLMw/3

— क्रिस्टोफर विलेंडर

क्षमा करें @Christofer - मेरे अद्यतन किए गए फ़िडल को सहेजना भूल गया। यहाँ यह फिर से है: jsfiddle.net/toddwprice/cRLMw/8 इसके अलावा, यहां एक लेख मैंने अभी पढ़ा है जिसमें कुछ दिलचस्प सीएसएस एनिमेशन हैं: tympanus.net/Tutorials/LadingAnim/index4.html

— टोड प्राइस

फ़ायरफ़ॉक्स का उपयोग करते हुए मैं इसे खींच नहीं सकता यदि मैं बस क्लिक करता हूं और एक शॉट में छवि को खींचता हूं। लेकिन अगर मैं पहले इमेज पर क्लिक करता हूं और फिर क्लिक करके ड्रैग करता हूं, तो मुझे ड्रैग करने से रोका नहीं जाता।

— सैम रुबी

मैंने HTML और CSS को थोड़ा सा उपयोग करने के लिए <i> टैग ... jsfiddle.net/DkcD4/77

— एडम यंगर्स

Answer 3

और भी सरल समाधान, बहुत अच्छी तरह से काम करता है!

<style>
    .loading:after {
      display: inline-block;
      animation: dotty steps(1,end) 1s infinite;
      content: '';
    }

    @keyframes dotty {
        0%   { content: ''; }
        25%  { content: '.'; }
        50%  { content: '..'; }
        75%  { content: '...'; }
        100% { content: ''; }
    }
</style>
<div class="loading">Loading</div>

बस कुछ डॉट्स को छिपाने के बजाय एनीमेशन के साथ सामग्री को संपादित किया ...

यहाँ डेमो: https://jsfiddle.net/f6vhway2/1/

---

संपादित करें: यह इंगित करने के लिए @BradCollins का धन्यवाद कि contentएक एनिमेटेबल संपत्ति नहीं है।

https://www.w3.org/TR/css3-transitions/#animatable-css

तो यह एक WebKit / ब्लिंक / इलेक्ट्रॉन केवल समाधान है। (लेकिन यह वर्तमान एफएफ संस्करणों में भी काम करता है)

Comments

मैं पिछले हफ्ते ही इस धागे को देख रहा था। अच्छा सरल जवाब!

— r8n5n

एनिमेशन के लिए +1 content। एक समान एनीमेशन लय पाने के लिए आपको steps(1)एक अतिरिक्त कुंजी फ़्रेम का उपयोग और परिभाषित करना चाहिए । चरण फ़ंक्शन प्रमुख फ़्रेमों के बीच चरणों की संख्या निर्धारित करता है और चूंकि हम प्रत्येक फ़्रेम को निर्दिष्ट कर रहे हैं, हम उनके बीच केवल एक ही चरण चाहते हैं। codepen.io/anon/pen/VmEdXj

— Jeff Camera

जबकि मुझे इस समाधान की लालित्य से प्यार है, यह ध्यान दिया जाना चाहिए कि IE11 और (इस लेखन के रूप में) फ़ायरफ़ॉक्स contentसंपत्ति को एनिमेट करने का समर्थन नहीं करता है । (एज के बारे में नहीं जानते।)

— ब्रैड कॉलिन्स

@BradCollins इसके लिए धन्यवाद! मैंने अपना उत्तर संपादित कर लिया है!

— कोडब्राउर

Answer 4

संक्षिप्त उत्तर "वास्तव में नहीं" है। हालाँकि, आप एनिमेटिंग चौड़ाई और अतिप्रवाह के साथ छिपा हुआ खेल सकते हैं, और शायद ऐसा प्रभाव प्राप्त करें जो "पर्याप्त रूप से बंद" हो। (कोड केवल फ़ायरफ़ॉक्स के लिए नीचे दिया गया है, आवश्यकतानुसार विक्रेता उपसर्ग जोड़ें)।

एचटीएमएल

<div class="loading">Loading</div>

सीएसएस

.loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    -moz-animation: ellipsis 2s infinite;
    content: "\2026"; /* ascii code for the ellipsis character */
}
@-moz-keyframes ellipsis {
    from {
        width: 2px;
    }
    to {
        width: 15px;
    }
}

डेमो: http://jsfiddle.net/MDzsR/1/

संपादित करें

ऐसा प्रतीत होता है कि क्रोम में छद्म तत्व को एनिमेट करने के मुद्दे हैं। एक आसान तय यह है कि एलिप्स को अपने तत्व में लपेटा जाए। की जाँच करें http://jsfiddle.net/MDzsR/4/

Comments

क्रोमियम में काम नहीं करना (हां, मैंने विक्रेता-उपसर्ग को इससे बदल दिया -webkitहै -moz)।

— डेविड का कहना है कि मोनिका

@DavidThomas आप सही हैं - अब क्रोम में परीक्षण किया गया है और ऐसा लगता है कि इसमें छद्म तत्व के साथ समस्याएं हैं। आप अपने तत्व और चेतन में दीर्घवृत्त लपेट सकते हैं (इसके बजाय फ़ायरफ़ॉक्स में भी काम करेंगे) jsfiddle.net/MDzsR/4

— xec

वास्तव में अच्छा समाधान, और फ़ायरफ़ॉक्स ओएस ऐप के लिए एकदम सही है जिसे मैं विकसित कर रहा हूं। इसे थोड़ा

— मोड़ दिया

यहां एक बेहतर संस्करण है जो क्रोम पर काम करता है, साथ ही गैर-बाएं संरेखित तत्वों के साथ सही ढंग से काम करता है (चौड़ाई नहीं बदलता है)। इसके अलावा, यह प्रत्येक स्लाइड को लगातार दिखाता है, इस स्लाइडिंग खुलासा कला के बिना: jsfiddle.net/fze2qxsv

— Aayla Secura

@AaylaSecura स्वीकार किए जाते हैं जवाब चरणों का उपयोग कर एक क्लीनर समाधान के बजाय है stackoverflow.com/a/28074607/833146

— XEC

Answer 5

देर से जोड़ लेकिन मुझे ऐसा करने का एक तरीका मिला जो केंद्रित पाठ का समर्थन करता है।

<element>:after {
    content: '\00a0\00a0\00a0';
    animation: progress-ellipsis 5s infinite;
}

@keyframes progress-ellipsis {
    0% {
        content: '\00a0\00a0\00a0';
    }
    30% {
        content: '.\00a0\00a0';
    }
    60% {
        content: '..\00a0';
    }
    90% {
        content: '...';
    }
}

Answer 6

आप चेतन कर सकते हैं clip(या बेहतर है clip-pathअगर आपको IE समर्थन की आवश्यकता नहीं है)

div {
  position: relative;
  display: inline-block;
  font-size: 1.4rem;
}

div:after {
  position: absolute;
  margin-left: .1rem;
  content: ' ...';
  display: inline-block;
  animation: loading steps(4) 2s infinite;
  clip: rect(auto, 0px, auto, auto);
}

@keyframes loading {
  to {
    clip: rect(auto, 20px, auto, auto);
  }
}

<div>Loading</div>

Answer 7

वास्तव में ऐसा करने का एक शुद्ध सीएसएस तरीका है।

मैंने CSS ट्रिक्स से उदाहरण प्राप्त किया, लेकिन इसे इंटरनेट एक्सप्लोरर में भी समर्थित किया (मैंने इसे 10+ में परीक्षण किया है)।

डेमो देखें: http://jsfiddle.net/Roobyx/AT6v6/2/

HTML:

<h4 id="searching-ellipsis"> Searching
    <span>.</span>
    <span>.</span>
    <span>.</span>
</h4>

सीएसएस:

@-webkit-keyframes opacity {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }
  100% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
}

@-moz-keyframes opacity {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }

  100% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
}

@-webkit-keyframes opacity {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }
  100% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
}

@-moz-keyframes opacity {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }
  100% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
}

@-o-keyframes opacity {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }
  100% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
}

@keyframes opacity {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }
  100% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
}
#searching-ellipsis span {
  -webkit-animation-name: opacity;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: opacity;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: infinite;
  -ms-animation-name: opacity;
  -ms-animation-duration: 1s;
  -ms-animation-iteration-count: infinite;
}
#searching-ellipsis span:nth-child(2) {
  -webkit-animation-delay: 100ms;
  -moz-animation-delay: 100ms;
  -ms-animation-delay: 100ms;
  -o-animation-delay: 100ms;
  animation-delay: 100ms;
}
#searching-ellipsis span:nth-child(3) {
  -webkit-animation-delay: 300ms;
  -moz-animation-delay: 300ms;
  -ms-animation-delay: 300ms;
  -o-animation-delay: 300ms;
  animation-delay: 300ms;
}

Comments

आप मोज़िला-विशिष्ट और वेबकिट-विशिष्ट कीफ़्रेम में मालिकाना IE-मात्र फ़िल्टर जोड़ रहे हैं। यह पहले से ही स्वीकृत समाधान पर एक सुधार कैसे है? यह भी एक ही मुद्दा है (फ्रेम 4 और 5 में केवल दो अंतिम और बहुत अंतिम बिंदु दिखाई देते हैं, क्रमशः, सवाल में उल्लिखित चीज़ के विपरीत, जिसमें 3 दोहराए गए राज्य हैं, 5 नहीं)

— xec

सवाल लोडिंग डॉट्स बनाने के बारे में है, और केवल एक निकट उदाहरण है, अनिवार्य नहीं है। मैंने जो जोड़ा है वह उपसर्ग है, इसलिए IE इसे बेहतर तरीके से पहचान सकता है और प्रदर्शित कर सकता है।

— MRadev

-webkit-keyframesकेवल वेबकिट पर लागू होगा, और आपके अंदर IE-only कोड होगा। यह कोड अंतरिक्ष को बर्बाद करने के अलावा कुछ नहीं करता है।

— xec

Answer 8

यहाँ शुद्ध सीएसएस https://jsfiddle.net/pduc6jx5/1/ के साथ मेरा समाधान समझाया गया है: https://medium.com/@lastseeds/create-text-ellipsis-animation-with-pure-nts-7f61acee69cc

एससीएसएस

.dot1 {
 animation: visibility 3s linear infinite;
}

@keyframes visibility {
 0% {
 opacity: 1;
 }
 65% {
 opacity: 1;
 }
 66% {
 opacity: 0;
 }
 100% {
 opacity: 0;
 }
}

.dot2 {
 animation: visibility2 3s linear infinite;
}

@keyframes visibility2 {
 0% {
  opacity: 0;
 }
 21% {
  opacity: 0;
 }
 22% {
  opacity: 1;
 }
 65% {
  opacity: 1;
 }
 66% {
  opacity: 0;
 }
 100% {
  opacity: 0;
 }
}

.dot3 {
 animation: visibility3 3s linear infinite;
}

@keyframes visibility3 {
 0% {
  opacity: 0;
 }
 43% {
  opacity: 0;
 }
 44% {
  opacity: 1;
 }
 65% {
  opacity: 1;
 }
 66% {
  opacity: 0;
 }
 100% {
  opacity: 0;
 }
}

एचटीएमएल

Loading <span class="dot dot1">.</span><span class="dot dot2">.</span><span class="dot dot3">.</span>