CSS 3으로 깜박임 / 깜박이는 텍스트를 만드는 방법

현재이 코드가 있습니다.

@-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. 가능합니까?

먼저 설정 opacity: 1;한 다음에 종료하고 0있으므로 시작 0%하고 끝납니다. 100%대신 불투명도를 0at로 설정 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를 사용하는 깜박임)

에 대한 alternate값을 사용하십시오 animation-direction(이 방법으로 keframe을 추가 할 필요가 없습니다).

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 버전 만 사용하지 마십시오. 접두사를 붙이지 않은 것을 추가하십시오. 더 적은 코드를 작성 하려면 속기를 사용 하십시오 .

이전과 같이 순수한 "100 % 켜짐, 100 % 꺼짐"깜박임을 얻는 가장 좋은 방법 <blink>은 다음과 같습니다.

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

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

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

또는 show와 hide 사이의 점진적인 전환을 원하지 않는 경우 (예 : 깜박이는 텍스트 커서) 다음과 같은 것을 사용할 수 있습니다.

/* 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 애니메이션이 지원되지 않는 경우 (예 : 일부 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보다 더 나은 기본값 일 수 있습니다. JS 애니메이션을 느리게 만드는 많은 DOM 호출 (예 : JQuery의 $ .animate ())은 주목할 가치가 있습니다.

또한 .cursor나중에 요소 를 추가해도 .cursor상태가 공유되므로 다른 요소와 정확히 동시에 애니메이션화 된다는 두 번째 이점이 있습니다. CSS에서 알 수없는 한 불가능합니다.

왜 그런지 모르겠지만 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>

지속 시간과 불투명도를 적절하게 변경하십시오.

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

늦었지만 더 많은 키 프레임을 가진 새로운 키 프레임을 추가하고 싶었습니다 ... 내장 코드 스 니펫에 문제가 있었기 때문에 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>

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

각 요소에 대해 class = blink 를 사용하여 나를 위해 작동합니다.

간단한 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);