CSS 3 के साथ ब्लिंकिंग / चमकता टेक्स्ट कैसे करें

Question

वर्तमान में, मेरे पास यह कोड है:

@-webkit-keyframes blinker {
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

.waitingForConnection {
  -webkit-animation-name: blinker;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
  -webkit-animation-duration: 1.7s;
}

यह झपकाता है, लेकिन यह केवल "एक दिशा" में झपकाता है। मेरा मतलब है, यह केवल बाहर निकलता है, और फिर यह वापस दिखाई देता है opacity: 1.0, फिर फिर से बाहर निकलता है, फिर से प्रकट होता है, और इसी तरह ...

मैं इसे फीका करना चाहूंगा, और फिर इस फीके से फिर से "उठा" करूंगा opacity: 1.0। क्या यह संभव है?

Comments

यदि आप इस पृष्ठ के दाईं ओर एक नज़र डालते हैं, तो कई 'संबंधित' विषयों के साथ संबंधित एक स्तंभ है । उनमें से कुछ पर नज़र डालें .. आप उन सभी का अध्ययन करने में सक्षम होंगे जिनकी आपको आवश्यकता है।

— मिल्के पैटरन

आप ब्रैडशॉ पर सीएसएस संक्रमण के बारे में एक त्वरित पाठ्यक्रम ले सकते हैं: css3.bradshawenterprise.com

— मिल्के पैटरन

कोई अपराध नहीं, अगर वह अपना पाठ पलक झपकाना चाहता है, तो वह अपना पाठ पलक झपकाना चाहता है। इससे कोई फर्क नहीं पड़ता कि यह किस वर्ष है। दुनिया में सबसे नवीन लोग वे हैं जो नियमों से नहीं जीते हैं। इसके विपरीत, वे आम तौर पर उन्हें तोड़ते हैं और अगले, हर कोई उन्हें कॉपी करता है। मुझे लगता है कि Apple एक बेहतरीन उदाहरण है। तो मैकी आदि आदि मैं बेहतर महसूस करूंगा अगर लोग सिर्फ अपने लिए अपनी राय रखें और बस सवाल का जवाब दें :-) जैसा कि कहा गया है, कोई अपराध नहीं। थोड़ा कठोर लगता है लेकिन मैं किसी को नाराज नहीं करना चाहता। बुरा न मानो। ;-)

— लॉरेंस

CSS3 एनिमेशन के साथ ब्लिंक टैग

— माइकल फ्रीजिम

पृष्ठ लोड पर फीका-इन प्रभाव के लिए CSS

— zloctb

Answer 1

आप पहले सेटिंग opacity: 1;कर रहे हैं और फिर आप इसे समाप्त कर रहे हैं 0, इसलिए यह शुरू होता है 0%और समाप्त होता है 100%, इसलिए इसके बजाय केवल 0पर अस्पष्टता सेट करें 50%और बाकी खुद को संभाल लेंगे।

डेमो

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

<div class="blink_me">BLINK ME</div>

यहाँ, मैं होने के लिए एनीमेशन अवधि निर्धारित करने कर रहा हूँ 1 second, और फिर मैं की स्थापना कर रहा हूँ timingकरने के लिए linear। इसका मतलब है कि यह पूरे समय स्थिर रहेगा। अंतिम, मैं उपयोग कर रहा हूं infinite। इसका मतलब है कि यह पर और पर जाना होगा।

नोट: यदि यह आपके लिए काम नहीं करता है, उपयोग ब्राउज़र उपसर्गों की तरह -webkit, -mozऔर इसी तरह के लिए आवश्यक animationऔर @keyframes। आप यहाँ मेरे विस्तृत कोड का उल्लेख कर सकते हैं

---

जैसा कि टिप्पणी की गई है, यह इंटरनेट एक्सप्लोरर के पुराने संस्करणों पर काम नहीं करेगा, और इसके लिए आपको jQuery या जावास्क्रिप्ट का उपयोग करने की आवश्यकता है ...

(function blink() {
  $('.blink_me').fadeOut(500).fadeIn(500, blink);
})();

^{बेहतर दृष्टिकोण सुझाने के लिए अलनीतक का धन्यवाद ।}

डेमो (ब्लिंकर jQuery का उपयोग करके)

Comments

बस देखा कि यह, एक पाठ तत्व पर लागू होता है, फ़ायरफ़ॉक्स का उपयोग करके मेरे कंप्यूटर पर सीपीयू की हास्यास्पद मात्रा का उपभोग करता है। खबरदार।

— एलेक्स

समाधान के लिए सबसे आसान समझने के लिए सबसे अच्छा उत्तर औसत दर्जे का

— इलाड चांदी

@ Mr.Alien दोनों के बीच कोई तालमेल नहीं है - फ़ेड टाइमर की तुलना में थोड़ा अधिक समय लगेगा (और टाइमर वैसे भी विश्वसनीय नहीं हैं) और अंततः आप संभवतः तत्व पर पंक्तिबद्ध एनिमेशन की अनबाउंड कतार के साथ समाप्त हो जाएंगे। सही दृष्टिकोण टाइमर के बिना करना होगा और कॉल blinkerको पूरा करने वाले कॉलबैक के रूप में "पुनरावर्ती" कॉल करना होगा .fadeIn।

— अलनीतक

@ Mr.Alien भी पूरी बात सिर्फ एक IIFE हो सकती है - यह एक लाइन प्रारंभिक आह्वान सहित पूरी बात करेगी: (function blink() { $('.blink_me').fadeOut(500).fadeIn(500, blink); })();

— Alnitak

step-endइसके बजाय linearमैं जो चाहता था।

— एलेक्स एस

Answer 2

के लिए alternateमान का उपयोग करें animation-direction(और आपको इस तरह से किसी भी केफ्रैम को जोड़ने की आवश्यकता नहीं है)।

alternate

एनीमेशन को प्रत्येक चक्र को उल्टा करना चाहिए। जब रिवर्स में खेलते हैं, तो एनीमेशन चरणों को पीछे की ओर किया जाता है। इसके अलावा, समय के कार्य भी उलट होते हैं; उदाहरण के लिए, एक आसानी से एनीमेशन को बदले में खेलने पर आसानी से बनाए गए एनीमेशन से बदल दिया जाता है। यह निर्धारित करने के लिए कि यह एक समान है या एक अजीब चलना शुरू होता है।

सीएसएस :

.waitingForConnection {
  animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
}
@keyframes blinker { to { opacity: 0; } }

मैंने कीफ्रेम को हटा दिया है from। यदि यह अनुपलब्ध है, तो यह आपके द्वारा opacityतत्व पर एनिमेटेड संपत्ति ( इस मामले में) के लिए निर्धारित मूल्य से उत्पन्न होता है, या यदि आपने इसे सेट नहीं किया है (और आप इस मामले में नहीं हैं), तो डिफ़ॉल्ट मान से (जो के 1लिए है opacity)।

और कृपया केवल WebKit संस्करण का उपयोग न करें। इसके बाद उपसर्ग भी जोड़ें। यदि आप कम कोड लिखना चाहते हैं, तो आशुलिपि का उपयोग करें ।

Comments

इसे तेजी से कैसे झपकाएं? 1.7s बदलने से यह गड़बड़ हो जाता है।

— एलेक्स जी।

@ एलेक्स आप या कुछ और के cubic-bezierसाथ भाग की जगह ले सकते हैं ease-in-out: cubic-bezier.com

— Danilo Bargen

+ क्यूबिक-

— बेज़ियर के

Answer 3

शुद्ध "100% पर, 100% बंद" पलक झपकने का सबसे अच्छा तरीका है, जैसे पुराना <blink>है:

.blink {
  animation: blinker 1s step-start infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

<div class="blink">BLINK</div>

Comments

एकमात्र सही "ब्लिंक" समाधान। और colorसंपत्ति आदि के साथ भी काम करता है। अन्य सामान वर्कअराउंड या "फीका" एनिमेशन हैं।

— मार्टिन श्नाइडर

Answer 4

वैकल्पिक रूप से यदि आप शो और हाइड के बीच एक क्रमिक संक्रमण नहीं चाहते हैं (उदाहरण के लिए एक ब्लिंकिंग टेक्स्ट कर्सर) तो आप कुछ इस तरह का उपयोग कर सकते हैं:

/* Also use prefixes with @keyframes and animation to support current browsers */
@keyframes blinker {  
  from { visibility: visible }
  to { visibility: hidden }

  /* Alternatively you can do this:  
  0% { visibility: visible; }
  50% { visibility: hidden; }
  100% { visibility: visible; }
  if you don't want to use `alternate` */
}
.cursor {
  animation: blinker steps(1) 500ms infinite alternate;
}

हर 1s .cursorसे जाना होगा visibleकरने के लिए hidden।

यदि CSS एनीमेशन समर्थित नहीं है (जैसे कि सफारी के कुछ संस्करणों में) तो आप इस सरल JS अंतराल पर वापस आ सकते हैं:

(function(){
  var show = 'visible'; // state var toggled by interval
  var time = 500; // milliseconds between each interval

  setInterval(function() {
    // Toggle our visible state on each interval
    show = (show === 'hidden') ? 'visible' : 'hidden';

    // Get the cursor elements
    var cursors = document.getElementsByClassName('cursor');
    // We could do this outside the interval callback,
    // but then it wouldn't be kept in sync with the DOM

    // Loop through the cursor elements and update them to the current state
    for (var i = 0; i < cursors.length; i++) {
      cursors[i].style.visibility = show;
    }
  }, time);
})()

यह सरल जावास्क्रिप्ट वास्तव में बहुत तेज है और कई मामलों में सीएसएस की तुलना में बेहतर डिफ़ॉल्ट भी हो सकता है। यह ध्यान देने योग्य है कि यह बहुत सारे DOM कॉल्स हैं जो JS एनिमेशन को धीमा बनाते हैं (जैसे JQuery के $ .animate ())।

इसका दूसरा फायदा यह भी है कि यदि आप .cursorबाद में तत्वों को जोड़ते हैं, तो वे अभी भी ठीक उसी समय पर चेतन करेंगे जैसे .cursorकि राज्य के साझा किए जाने के बाद से, यह सीएसएस के साथ असंभव है जहां तक ​​मुझे जानकारी है।

Comments

यह आईओएस सफारी के लिए अच्छी तरह से काम करता है। किसी भी विचार यह कैसे सफारी पर काम करने के लिए?

— जो जोस्ट जूल

@JoeOrost मैंने उन ब्राउज़रों के लिए एक जेएस विकल्प शामिल किया है जो सीएसएस एनिमेशन का समर्थन नहीं करते हैं। मेरी राय में यह आम तौर पर एक बेहतर समाधान हो सकता है!

— मैटस्टर्जन

Answer 5

मुझे नहीं पता कि क्यों लेकिन केवल visibilityसंपत्ति को किसी भी ब्राउज़र पर काम नहीं कर रहा है।

आप जो कर सकते हैं वह opacityसंपत्ति को इस तरह से चेतन करना है कि ब्राउज़र में पाठ को मिटाने या बाहर करने के लिए पर्याप्त फ्रेम नहीं है।

उदाहरण:

span {
  opacity: 0;
  animation: blinking 1s linear infinite;
}

@keyframes blinking {
  from,
  49.9% {
    opacity: 0;
  }
  50%,
  to {
    opacity: 1;
  }
}

<span>I'm blinking text</span>

Comments

यह मूर्खतापूर्ण है - बस उपयोग करें step-start(मेरा उत्तर देखें)।

— टिम्मम

मुझे इसकी ही चाहत थी। थम्स अप।

— सैमुअल रमज़ान

Answer 6

सूट करने के लिए अवधि और अस्पष्टता बदलें।

.blink_text { 
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: blinker;
    -moz-animation-duration: 3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    animation-name: blinker;
    animation-duration: 3s;
    animation-timing-function: linear; 
    animation-iteration-count: infinite; color: red; 
} 

@-moz-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; } 
}

@-webkit-keyframes blinker { 
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; } 
} 

@keyframes blinker { 
    0% { opacity: 1.0; } 
    50% { opacity: 0.3; } 
    100% { opacity: 1.0; } 
}

Answer 7

@-webkit-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

.blink {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  animation: blinker 2s linear infinite;
  background-color: red;
  margin-right: 5px;
}

.content {
  display: flex;
  flex-direction: row;
  align-items: center;
}

<div class="content">
  <i class="blink"></i>
  LIVE
</div>

Answer 8

देर से, लेकिन अधिक keyframes के साथ एक नया जोड़ना चाहते थे ... यहाँ कोडपैन पर एक उदाहरण है क्योंकि अंतर्निहित कोड स्निपेट के साथ एक मुद्दा था:

.block{
  display:inline-block;
  padding:30px 50px;
  background:#000;
}
.flash-me {
  color:#fff;
  font-size:40px;
  -webkit-animation: flash linear 1.7s infinite;
  animation: flash linear 1.7s infinite;
}

@-webkit-keyframes flash {
  0% { opacity: 0; } 
  80% { opacity: 1; color:#fff; } 
  83% { opacity: 0; color:#fff; } 
  86% { opacity: 1; color:#fff;}  
  89% { opacity: 0} 
  92% { opacity: 1; color:#fff;} 
  95% { opacity: 0; color:#fff;}
  100% { opacity: 1; color:#fff;}
}
@keyframes flash {
  0% { opacity: 0; } 
  80% { opacity: 1; color:#fff; } 
  83% { opacity: 0; color:#fff; } 
  86% { opacity: 1; color:#fff;}  
  89% { opacity: 0} 
  92% { opacity: 1; color:#fff;} 
  95% { opacity: 0; color:#fff;}
  100% { opacity: 1; color:#fff;}
}

<span class="block">
  <span class="flash-me">Flash Me Hard</span>
</span>

Answer 9

<style>
    .class1{
        height:100px;
        line-height:100px;
        color:white;
        font-family:Bauhaus 93;
        padding:25px;
        background-color:#2a9fd4;
        border:outset blue;
        border-radius:25px;
        box-shadow:10px 10px green;
        font-size:45px;
    }
     .class2{
        height:100px;
        line-height:100px;
        color:white;
        font-family:Bauhaus 93;
        padding:25px;
        background-color:green;
        border:outset blue;
        border-radius:25px;
        box-shadow:10px 10px green;
        font-size:65px;
    }
</style>
<script src="jquery-3.js"></script>
<script>
    $(document).ready(function () {
        $('#div1').addClass('class1');
        var flag = true;

        function blink() {
            if(flag)
            {
                $("#div1").addClass('class2');
                flag = false;
            }
            else
            { 
                if ($('#div1').hasClass('class2'))
                    $('#div1').removeClass('class2').addClass('class1');
                flag = true;
            }
        }
        window.setInterval(blink, 1000);
    });
</script>

Answer 10

यह मेरे लिए वर्ग = संबंधित तत्व के लिए ब्लिंक का उपयोग करके काम करता है

सरल जेएस कोड

// Blink
      setInterval(function()
        {

        setTimeout(function()
        {

        //$(".blink").css("color","rgba(0,0,0,0.1)"); // If you want simply black/white blink of text
        $(".blink").css("visibility","hidden"); // This is for Visibility of the element  


        },900);


        //$(".blink").css("color","rgba(0,0,0,1)");  // If you want simply black/white blink of text
        $(".blink").css("visibility","visible");  // This is for Visibility of the element

        },1000);