วิธีทำให้ข้อความกะพริบ / กระพริบด้วย CSS 3


288

ขณะนี้ฉันมีรหัสนี้:

@-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จากจางนี้กลับมาอีกครั้งเพื่อ เป็นไปได้ไหม


1
หากคุณดูทางด้านขวาของหน้านี้จะมีคอลัมน์ชื่อหัวข้อที่เกี่ยวข้องกับหัวข้อ 'ที่เกี่ยวข้อง' มากมาย ลองดูที่บางอย่าง .. คุณจะสามารถศึกษาทุกสิ่งที่คุณต้องการ
Milche Patern

2
คุณสามารถเข้าร่วมหลักสูตรอย่างรวดเร็วเกี่ยวกับการเปลี่ยน css บน bradshaw: css3.bradshawenterprises.com
Milche Patern

82
ไม่มีความผิดถ้าเขาต้องการที่จะกระพริบข้อความของเขาเขาต้องการที่จะกระพริบข้อความของเขา ไม่สำคัญว่าจะเป็นปีอะไร คนที่มีนวัตกรรมมากที่สุดในโลกคือผู้ที่ไม่ได้อยู่ในกฎ ค่อนข้างตรงกันข้ามพวกเขามักจะทำลายพวกเขาและต่อไปทุกคนคัดลอกพวกเขา ฉันเดาว่า Apple เป็นตัวอย่างที่ดี ดังนั้นแม็คกี้เป็นต้น ฯลฯ ฉันจะรู้สึกดีขึ้นถ้าคนเพียงแค่เก็บความคิดเห็นของตัวเองและตอบคำถามไปที่ประเด็น :-) ตามที่กล่าวไว้ไม่มีความผิด ฟังดูรุนแรงเล็กน้อย แต่ฉันไม่ต้องการที่จะยั่วไม่ทำให้ใครขุ่นเคือง ไม่มีความรู้สึกยาก. ;-)
ลอเรนซ์


คำตอบ:


658

คุณกำลังตั้งค่าแรก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คุณสามารถดูรหัสรายละเอียดของฉันได้ที่นี่


ตามที่แสดงความคิดเห็นสิ่งนี้จะไม่ทำงานใน Internet Explorer เวอร์ชั่นเก่าและเพื่อที่คุณจะต้องใช้ jQuery หรือ JavaScript ...

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

ขอขอบคุณที่ Alnitak สำหรับการแนะนำวิธีการที่ดี

การสาธิต (ไฟกระพริบโดยใช้ jQuery)


7
เพิ่งสังเกตเห็นว่าสิ่งนี้นำไปใช้กับองค์ประกอบข้อความหนึ่งใช้ปริมาณ CPU ที่ไร้สาระบนคอมพิวเตอร์ของฉันโดยใช้ firefox ระวัง.
อเล็กซ์

2
คำตอบที่ดีที่สุดสำหรับการเป็นโซลูชั่นที่เข้าใจง่ายที่สุด avialable
เงิน elad

4
@ Mr.Alien ไม่มีการซิงโครไนซ์ระหว่างทั้งสอง - จางหายไปจะใช้เวลานานกว่าตัวจับเวลาเล็กน้อย (และตัวจับเวลาไม่น่าเชื่อถือ) และในที่สุดคุณก็จะจบลงด้วยคิวภาพเคลื่อนไหวที่ไม่ได้ถูกจัดคิวไว้ในองค์ประกอบ วิธีการที่ถูกต้องจะทำโดยไม่มีตัวจับเวลาและ "เรียกซ้ำ" blinkerเป็นการโทรกลับเสร็จสิ้นการ.fadeInโทร
Alnitak

3
@ Mr.Alien สิ่งทั้งหมดอาจเป็นเพียง IIFE - บรรทัดนี้จะทำทุกอย่างรวมถึงการร้องขอครั้งแรก: (function blink() { $('.blink_me').fadeOut(500).fadeIn(500, blink); })();
Alnitak

2
step-endแทนที่จะlinearเป็นสิ่งที่ฉันต้องการ
Alex S

71

ใช้alternateค่าสำหรับanimation-direction(และคุณไม่จำเป็นต้องเพิ่ม keframes ด้วยวิธีนี้)

alternate

ภาพเคลื่อนไหวควรกลับทิศทางในแต่ละรอบ เมื่อเล่นแบบย้อนกลับ นอกจากนี้ฟังก์ชั่นจับเวลายังย้อนกลับ; ตัวอย่างเช่นภาพเคลื่อนไหวที่ง่ายในจะถูกแทนที่ด้วยภาพเคลื่อนไหวที่ง่ายออกเมื่อเล่นในสิ่งที่ตรงกันข้าม การนับเพื่อพิจารณาว่ามันเป็นซ้ำหรือคี่เริ่มต้นที่หนึ่ง

CSS :

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

ฉันลบfromคีย์เฟรม ถ้ามันหายไปมันจะถูกสร้างขึ้นจากค่าที่คุณตั้งค่าสำหรับคุณสมบัติภาพเคลื่อนไหว ( opacityในกรณีนี้) ในองค์ประกอบหรือถ้าคุณไม่ได้ตั้งค่า (และคุณไม่ได้อยู่ในกรณีนี้) จากค่าเริ่มต้น (ซึ่งมี1ไว้สำหรับopacity)

และโปรดอย่าใช้เฉพาะรุ่น WebKit เพิ่มหนึ่งที่ไม่ได้เตรียมไว้หลังจากนั้นเช่นกัน หากคุณเพียงแค่ต้องการที่จะเขียนโค้ดน้อยใช้ชวเลข


จะทำให้กระพริบเร็วขึ้นได้อย่างไร? การเปลี่ยน 1.7s ทำให้มันยุ่ง
Alex G

1
@AlexG คุณสามารถแทนที่cubic-bezierส่วนด้วยease-in-outหรืออย่างอื่น: cubic-bezier.com
Danilo Bargen

+ หนึ่งสำหรับลูกบาศก์
เบซิเย

57

วิธีที่ดีที่สุดในการรับสัญญาณกะพริบ "บริสุทธิ์ 100%, ปิด 100%" แบบเก่า<blink>จะเป็นดังนี้:

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

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
<div class="blink">BLINK</div>


5
ทางออก "กะพริบ" ที่แท้จริงเท่านั้น และยังสามารถใช้งานได้กับcolorคุณสมบัติอื่น ๆ อีกด้วยสิ่งอื่น ๆ คือวิธีการแก้ไขหรือภาพเคลื่อนไหว "จาง"
Martin Schneider

15

อีกทางเลือกหนึ่งหากคุณไม่ต้องการให้เกิดการเปลี่ยนแปลงอย่างค่อยเป็นค่อยไประหว่างการแสดงและซ่อน (เช่นเคอร์เซอร์ข้อความที่กะพริบ) คุณสามารถใช้สิ่งต่อไปนี้:

/* 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จะไปจากการvisiblehidden

หากไม่รองรับภาพเคลื่อนไหว CSS (เช่นใน Safari บางรุ่น) คุณสามารถย้อนกลับไปที่ช่วงเวลา 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);
})()

JavaScript แบบง่ายนี้จริง ๆ แล้วเร็วมากและในหลายกรณีอาจเป็นค่าเริ่มต้นที่ดีกว่า CSS เป็นที่น่าสังเกตว่ามันเป็นการโทร DOM จำนวนมากที่ทำให้แอนิเมชั่นของ JS ช้าลง (เช่น $ .animate $. JQuery ของ)

นอกจากนี้ยังมีข้อได้เปรียบที่สองที่ว่าถ้าคุณเพิ่ม.cursorองค์ประกอบในภายหลังพวกเขาจะยังคงเคลื่อนไหวในเวลาเดียวกับที่คนอื่น ๆ.cursorนับตั้งแต่รัฐมีการแบ่งปันสิ่งนี้เป็นไปไม่ได้ที่ CSS จะอยู่ไกลเท่าที่ฉันรู้


สิ่งนี้ทำงานได้ดียกเว้นสำหรับ iOS Safari ความคิดใด ๆ ที่จะทำให้มันทำงานบน Safari ได้บ้าง?
Joe Orost

@JoeOrost ฉันได้รวมตัวเลือก JS สำหรับเบราว์เซอร์ที่ไม่รองรับภาพเคลื่อนไหว CSS ในความคิดของฉันมันอาจเป็นทางออกที่ดีกว่าโดยทั่วไป!
MattSturgeon

14

ฉันไม่รู้ว่าทำไม แต่การสร้างภาพเคลื่อนไหวเฉพาะ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>


2
นี่มันงี่เง่าแค่ใช้step-start(ดูคำตอบของฉัน)
Timmmm

สมบูรณ์แบบสิ่งที่ฉันกำลังมองหา ยกนิ้ว
ซามูเอล Ramzan

9

เปลี่ยนระยะเวลาและความทึบเพื่อให้เหมาะสม

.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; } 
}

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


4

ล่าช้า แต่ต้องการเพิ่มใหม่พร้อมคีย์เฟรมเพิ่มเติม ... นี่คือตัวอย่างของ CodePenเนื่องจากมีปัญหากับตัวอย่างโค้ดในตัว:

.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>


0
<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>

0

มันใช้งานได้สำหรับฉันโดยใช้class = กะพริบสำหรับองค์ประกอบที่เกี่ยวข้อง

รหัส JS ง่าย ๆ

// 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);
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.