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

Question

मैं वास्तव में जावास्क्रिप्ट या पाठ-सजावट का उपयोग किए बिना पाठ के एक टुकड़े को पुरानी-स्कूल शैली बनाना चाहता हूं।

कोई संक्रमण नहीं, केवल * ब्लिंक *, * ब्लिंक *, * ब्लिंक *!

---

संपादित करें : यह उस सवाल से अलग है क्योंकि मैं निरंतर बदलाव के बिना पलक झपकने के लिए कहता हूं , जबकि अन्य प्रश्नों के ओपी पूछता है कि निरंतर बदलाव के साथ पलक कैसे बदलें

Comments

इसके लिए मुझे जो सबसे अच्छा जवाब मिला है, वह दुर्भाग्य से मूल पोस्टर @ m93a द्वारा हटा दिया गया था, इसलिए इसे अभी तक नहीं हटाया जा सकता है। मुझे लगता है कि उत्तर को हटाना और उखाड़ना चाहिए क्योंकि यह सबसे सरल समाधान है जो सबसे अच्छा ब्लिंक प्रभाव पैदा करता है, और यह सभी प्रमुख ब्राउज़रों के वर्तमान संस्करणों में काम करता है । आप WebKit CSS3 एनीमेशन का उपयोग करके <blink> पर एक ही समाधान पर एक छोटा ब्लॉग पोस्ट भी पढ़ सकते हैं ।

क्यों हर एक सवाल का जवाब यहाँ लगता है क्या मुझे समझ नहीं आता है @-webkit-keyframesशासन के बाद बिना उपसर्ग वाले @keyframesनियम, और कुछ भी नहीं है -webkit-animationबिना उपसर्ग वाले एक के बाद घोषणा।

— BoltClock

@BoltClock: ऐसा इसलिए है क्योंकि CSS3 के एनिमेशन अपेक्षाकृत नए हैं और अभी तक वेबकिट ब्राउज़र में स्थिर नहीं हैं। तथाकथित "उपसर्ग" यहाँ डेवलपर्स के लिए है जो एनिमेशन का उपयोग करना चाहते हैं भले ही वे अस्थिर हों और समाप्त न हों।

— m93a

@ m93a: मुझे पता है कि, लेकिन मैं पूछ रहा हूं कि उन्हें उपसर्ग नियम के बाद क्यों रखा गया है और इससे पहले नहीं (जाहिर तौर पर मैंने अपनी मूल टिप्पणी, अपनी गलती में उस वाक्यांश को शामिल नहीं किया है)।

— BoltClock

संभव डुप्लिकेट कैसे css3 के साथ पलक / चमकती पाठ बनाने के लिए?

— ब्रैड वेर्थ

Answer 1

मूल नेटस्केप <blink>में 80% शुल्क चक्र था। यह बहुत करीब आता है, हालांकि असली <blink>केवल पाठ को प्रभावित करता है:

.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

This is <span class="blink">blinking</span> text.

आप यहां कीफ्रेम एनिमेशन के बारे में अधिक जानकारी पा सकते हैं ।

Comments

हाँ, यह बहुत simpier है। आप इसे क्रोम और सफारी में काम करने के लिए वेबकिट उपसर्ग जोड़ सकते हैं।

— m93a

यह बिना webkit उपसर्ग के क्रोम / सफारी पर काम नहीं कर सकता है।

— डेविड पेलाज

मुझे क्या करना अच्छा लगता है, पलक को क्लास बनाने के बजाय, पलक को टैग (के साथ blink { animation: blink 1s steps(5, start) infinite; -webkit-animation: blink 1s steps(5, start) infinite; }) बनाना। इस तरह, आप सिर्फ =) के <blink>बजाय टैग का उपयोग कर सकते हैं<span class="blink">

— 416E64726577

नोट: यह केवल ओपी का अनुरोध है "<पलक> नकल"। color"ऑन-ऑफ" -ब्लिंक-एनीमेशन के रूप में संपत्ति के साथ प्रयोग करने योग्य नहीं है ।

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

Answer 2

चलिए मैं आपको थोड़ा ट्रिक दिखाता हूं।

जैसा कि अर्कांसिस्कन ने कहा , आप CSS3 के बदलावों का उपयोग कर सकते हैं। लेकिन उसका समाधान मूल टैग से अलग दिखता है।

आपको वास्तव में ऐसा करने की आवश्यकता है:

@keyframes blink {
  50% {
    opacity: 0.0;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 0.0;
  }
}
.blink {
  animation: blink 1s step-start 0s infinite;
  -webkit-animation: blink 1s step-start 0s infinite;
}

<span class="blink">Blink</span>

JSfiddle डेमो

Comments

@ फोर्टी -टू सॉरी, मैं भूल गया था -बेटक- उपसर्ग। यह काम करता है, मुझे लगता है कि सभी वास्तविक ब्राउज़र लेकिन क्रोम और सफारी के लिए। अब, अद्यतन के बाद, यह फ़ायरफ़ॉक्स, क्रोम, ओपेरा, सफारी और MSIE10 के लिए काम करना चाहिए।

— m93a

जैसा कि लिखा गया है, यह उत्तर वास्तव में फ़ायरफ़ॉक्स, क्रोम, सफारी और IE के वर्तमान संस्करणों में काम करेगा ।

एक टाइपो के कारण काम नहीं किया: वेबकिट भाग पर, एनीमेशन नाम, blinkगायब था। फिक्स्ड।

— एंड्रिया लिगियोस

ठीक काम करता है, धन्यवाद, यहाँ आपके समाधान के आधार पर मेरा कार्यान्वयन है: jsfiddle.net/gnx4mqc4

— हामिद बेहनाम

@ m93a: 0% 100% { opacity: 1.0; }जबसे वे डिफॉल्ट होते हैं, तब से वे खंड अतिसुंदर लगते हैं, नहीं?

— जमदग्नि

Answer 3

इस सीएसएस की कोशिश करो

@keyframes blink {  
  0% { color: red; }
  100% { color: black; }
}
@-webkit-keyframes blink {
  0% { color: red; }
  100% { color: black; }
}
.blink {
  -webkit-animation: blink 1s linear infinite;
  -moz-animation: blink 1s linear infinite;
  animation: blink 1s linear infinite;
} 

This is <span class="blink">blink</span>

आपको ब्राउज़र / विक्रेता विशिष्ट उपसर्गों की आवश्यकता है: http://jsfiddle.net/es6e6/1/ ।

Comments

कुछ भी नहीं है जैसे -ms-एनीमेशन या -o- एनीमेशन और -moz- एनीमेशन केवल संस्करण 15 में था, अब इसका उपयोग न करें। वास्तविक समर्थन देखने के लिए caniuse.com को देखें। आप दूसरे के जवाब पर 'संपादन' का उपयोग कर सकते हैं: क्षमा करें, लेकिन मैं इस सवाल को स्वीकार करेंगे नहीं :( पी एस।

— m93a

यह सिर्फ मेरी पुरानी बुरी आदत है - सभी नए CSS3 गुणों के लिए प्रत्यय जोड़ें .. अद्यतन उत्तर।

— बिल्लाश

यह "ब्लिंक" नहीं है, लेकिन "ब्लिंक-फेडेड" है।

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

Answer 4

वास्तव में इसकी कोई आवश्यकता नहीं है - visibilityया opacityआप केवल उपयोग कर सकते हैं color, जिसमें किसी भी "ब्लिंकिंग" को केवल पाठ में रखने का उल्टा है:

blink {
    display: inline;
    color: inherit;
    animation: blink 1s steps(1) infinite;
    -webkit-animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { color: transparent; } }
@-webkit-keyframes blink { 50% { color: transparent; } }

Here is some text, <blink>this text will blink</blink>, this will not.

फिडल: http://jsfiddle.net/2r8JL/

Comments

आश्चर्यजनक! यह एकमात्र समाधान है जो पाठ-केवल निमिष प्रदान करता है। अन्य सभी समाधान तत्व की पृष्ठभूमि को भी झपकाते हैं। परीक्षण करने के लिए, हरे रंग की पृष्ठभूमि के साथ <span>नीले पाठ पर सफेद रंग के साथ उपयोग करें <body>। केवल इस समाधान में, ब्लू स्पैन बैकग्राउंड ब्लिंक नहीं होगा।

— जमदग्नि

Answer 5

मैं इसके लिए नरक जा रहा हूं:

=keyframes($name)
  @-webkit-keyframes #{$name}
    @content
  @-moz-keyframes #{$name}
    @content
  @-ms-keyframes #{$name}
    @content
  @keyframes #{$name}
    @content


+keyframes(blink)
  25%
    zoom: 1
    opacity: 1

  65%
    opacity: 1 

  66%
    opacity: 0

  100%
    opacity: 0

body
  font-family: sans-serif
  font-size: 4em
  background: #222
  text-align: center

  .blink
    color: rgba(#fff, 0.9)
    +animation(blink 1s 0s reverse infinite)
    +transform(translateZ(0))

.table
  display: table
  height: 5em
  width: 100%
  vertical-align: middle

  .cell
    display: table-cell
    width: 100%
    height: 100%
    vertical-align: middle

http://codepen.io/anon/pen/kaGxC (बोर्बन के साथ सास)

Comments

आपका कोडपेन एक Undefined mixin 'experimental'.त्रुटि उत्पन्न करता है , और इस तरह लगता है कि यह ब्लिंक एनीमेशन को संकलित और प्रदर्शित नहीं करेगा।

Answer 6

एक और बदलाव

.blink {
    -webkit-animation: blink 1s step-end infinite;
            animation: blink 1s step-end infinite;
}
@-webkit-keyframes blink { 50% { visibility: hidden; }}
        @keyframes blink { 50% { visibility: hidden; }}

This is <span class="blink">blink</span>

Answer 7

यह 1s के अंतराल पर टेक्स्ट को ब्लिंक करने के मामले में काम कर रहा है।

.blink_me {
  color:#e91e63;
  font-size:140%;
  font-weight:bold;
  padding:0 20px 0  0;
  animation: blinker 1s linear infinite;
}

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

Answer 8

अगर आप कुछ चमक प्रभाव का उपयोग करना चाहते हैं

@keyframes blink {
  50% {
    opacity: 0.0;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 0.0;
  }
}

atom-text-editor::shadow  .bracket-matcher .region {
    border:none;
    background-color: rgba(195,195,255,0.1);
    border-bottom: 1px solid rgb(155,155,255);
    box-shadow: 0px 0px 9px 4px rgba(155,155,255,0.1);
    border-radius: 3px;
    animation: blink 2s steps(115, start) infinite;
    -webkit-animation: blink 2s steps(115, start) infinite;
}

Answer 9

कृपया अपने कोड के लिए नीचे समाधान खोजें।

@keyframes blink {
  50% {
    color: transparent;
  }
}

.loader__dot {
  animation: 1s blink infinite;
}

.loader__dot:nth-child(2) {
  animation-delay: 250ms;
}

.loader__dot:nth-child(3) {
  animation-delay: 500ms;
}

Loading <span class="loader__dot">.</span><span class="loader__dot">.</span><span class="loader__dot">.</span>