Cách tạo văn bản nhấp nháy / nhấp nháy bằng CSS 3

Hiện tại, tôi có mã này:

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

Nó nhấp nháy, nhưng nó chỉ nhấp nháy theo "một hướng". Ý tôi là, nó chỉ mờ dần, và sau đó nó xuất hiện trở lại opacity: 1.0, rồi lại mờ dần, xuất hiện trở lại, v.v.

Tôi muốn nó biến mất, và sau đó "nâng" từ sự mờ dần này trở lại opacity: 1.0. Điều đó có thể không?

Bạn đang thiết lập đầu tiên opacity: 1;và sau đó bạn đang kết thúc nó trên 0, vì vậy nó bắt đầu từ 0%và kết thúc vào 100%, vì vậy thay vì chỉ cần thiết lập opacity để 0ở 50%và phần còn lại sẽ chăm sóc bản thân.

Bản giới thiệu

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

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

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

Ở đây, tôi đang đặt thời lượng hoạt ảnh thành 1 second, và sau đó tôi đang đặt timingthành linear. Điều đó có nghĩa là nó sẽ không đổi trong suốt. Cuối cùng, tôi đang sử dụng infinite. Điều đó có nghĩa là nó sẽ tiếp tục và tiếp tục.

Lưu ý: Nếu điều này không phù hợp với bạn, hãy sử dụng các tiền tố trình duyệt như -webkit, -mozv.v. theo yêu cầu cho animationvà @keyframes. Bạn có thể tham khảo mã chi tiết của tôi ở đây

Như đã nhận xét, điều này sẽ không hoạt động trên các phiên bản Internet Explorer cũ hơn và vì thế bạn cần sử dụng jQuery hoặc JavaScript ...

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

^{Cảm ơn Alnitak đã gợi ý một cách tiếp cận tốt hơn .}

Bản trình diễn (Blinker sử dụng jQuery)

Sử dụng alternategiá trị cho animation-direction(và bạn không cần thêm bất kỳ kefram nào theo cách này).

alternate

Các hình ảnh động nên đảo ngược mỗi chu kỳ. Khi chơi ngược lại, các bước hoạt hình được thực hiện ngược. Ngoài ra, chức năng thời gian cũng bị đảo ngược; ví dụ, một hình ảnh động dễ dàng được thay thế bằng một hình ảnh động dễ dàng khi được chơi ngược lại. Số lượng để xác định nếu nó là một lần lặp chẵn hoặc lặp lại bắt đầu từ một.

CSS :

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

Tôi đã xóa fromkeyframe. Nếu nó bị thiếu, nó được tạo từ giá trị bạn đã đặt cho thuộc tính hoạt hình ( opacitytrong trường hợp này) trên phần tử hoặc nếu bạn chưa đặt nó (và trong trường hợp này bạn không có giá trị này), từ giá trị mặc định (đó là 1cho opacity).

Và xin vui lòng không sử dụng phiên bản WebKit. Thêm cái chưa được chuẩn bị sau nó là tốt. Nếu bạn chỉ muốn viết ít mã hơn, hãy sử dụng tốc ký .

Cách tốt nhất để có được một nháy mắt "100% trên, 100%" thuần túy, như cũ <blink>là như thế này:

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

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

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

Ngoài ra, nếu bạn không muốn chuyển đổi dần dần giữa hiển thị và ẩn (ví dụ: con trỏ văn bản nhấp nháy), bạn có thể sử dụng một cái gì đó như:

/* 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;
}

Mỗi 1s .cursorsẽ đi từ visibleđến hidden.

Nếu hoạt hình CSS không được hỗ trợ (ví dụ: trong một số phiên bản Safari), bạn có thể dự phòng khoảng thời gian JS đơn giản này:

(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 đơn giản này thực sự rất nhanh và trong nhiều trường hợp thậm chí có thể là mặc định tốt hơn CSS. Điều đáng chú ý là có rất nhiều lệnh gọi DOM làm cho hoạt ảnh JS bị chậm (ví dụ: $ .animate ()) của JQuery.

Nó cũng có lợi thế thứ hai là nếu bạn thêm .cursorcác phần tử sau, chúng vẫn sẽ hoạt động chính xác cùng lúc với các .cursortrạng thái khác kể từ khi trạng thái được chia sẻ, điều này là không thể đối với CSS theo như tôi biết.

Tôi không biết tại sao nhưng chỉ hoạt hình visibilitytài sản không hoạt động trên bất kỳ trình duyệt nào.

Những gì bạn có thể làm là làm động các thuộc opacitytính theo cách mà trình duyệt không có đủ khung để làm mờ hoặc xóa văn bản.

Thí dụ:

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>

Thay đổi thời lượng và độ mờ cho phù hợp.

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

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

Muộn nhưng muốn thêm một cái mới có nhiều khung hình chính hơn ... đây là một ví dụ trên CodePen vì có một vấn đề với đoạn mã tích hợp:

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

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

Nó hoạt động với tôi bằng cách sử dụng class = flash cho (các) phần tử tương ứng

Mã JS đơn giản

// 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);