CSS로 점멸/점멸 문자를 만드는 방법 3

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%, 그래서 대신에 불투명성을 설정합니다.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를 사용하여 깜박임)

예전처럼 순수하게 "100% on, 100% off" 깜빡이는 방법<blink>다음과 같습니다.

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

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

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

에 대한 값을 사용합니다(이러한 방식으로 키프레임을 추가할 필요는 없습니다).

alternate

애니메이션은 매 주기마다 방향을 반대로 설정해야 합니다.역방향으로 재생할 경우 애니메이션 단계가 역방향으로 수행됩니다.또한 타이밍 기능도 반대로 전환됩니다. 예를 들어, Easy-in 애니메이션은 반대로 재생될 때 Easy-out 애니메이션으로 대체됩니다.짝수 또는 홀수 반복 여부를 결정하는 카운트는 1에서 시작합니다.

CSS:

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

제거했습니다.from키프레임누락된 경우 애니메이션 속성에 대해 설정한 값에서 생성됩니다(opacity이 경우) 요소에서 또는 설정하지 않은 경우(그리고 이 경우 설정하지 않은 경우), 기본값(즉,1위해서opacity).

그리고 웹킷 버전만 사용하지 말아주세요.고정되지 않은 것도 그 뒤에 추가합니다.코드를 적게 쓰려면 속기를 사용합니다.

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

.waitingForConnection2 {
  animation: blinker2 0.6s cubic-bezier(1, 0, 0, 1) infinite alternate;  
}
@keyframes blinker2 { to { opacity: 0; } }

.waitingForConnection3 {
  animation: blinker3 1s ease-in-out infinite alternate;  
}
@keyframes blinker3 { to { opacity: 0; } }

<div class="waitingForConnection">X</div>
<div class="waitingForConnection2">Y</div>
<div class="waitingForConnection3">Z</div>

매끄러운 애니메이션을 원한다면 이것을 시도해 보세요.

    .blink {
        animation: blinker 1s infinite;
    }
      
    @keyframes blinker {
        from { opacity: 1.0; }
        50% { opacity: 0.5; }
        to { opacity: 1.0; }
    }

    <span class="blink">I am blinking</span>

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

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

이 간단한 자바스크립트는 실제로 매우 빠르며 많은 경우 CSS보다 더 나은 기본값일 수도 있습니다.JS 애니메이션을 느리게 만드는 것은 많은 DOM 호출이라는 점에 주목할 필요가 있습니다(예: JQuery의 $.animate()).

다음을 추가하면 다음과 같은 두 번째 장점도 있습니다..cursor나중에 원소들은 다른 것들과 정확히 같은 시간에 여전히 만화영화가 될 것입니다..cursors 상태가 공유되고 있기 때문에 CSS로는 불가능하다고 알고 있는 한 불가능합니다.

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

왜인지는 모르겠지만 오직.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 {
 animation: blinkMe 2s linear infinite;
}
@keyframes blinkMe {
 0% {
  opacity: 0;
 }
 50% {
  opacity: 1;
 }
 100% {
  opacity: 0;
 }
}

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

애니메이션의 이름은 blinkMe, 지속시간은 2s, 타이밍은 선형, 무한을 사용하여 영원히 반복되도록 합니다.

이전 브라우저의 경우 애니메이션 및/또는 @keyframe을 지원하지 않으므로 JavaScript 및 jQuery를 사용해야 합니다.

$(document).ready(function() {
 window.setInterval(function() {
  $(".blink").fadeIn(1000).fadeOut(1000);
 }, 2000)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p class="blink">Blink</p>

눈 깜빡임 태그와 동일하게 작동하는 눈 깜빡임 효과를 만들려면 다음과 같이 해야 합니다.

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

<p class="blink">Blink</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; } 
}

늦었지만 키프레임이 더 많은 새 키프레임을 추가하고 싶었습니다...내장된 코드 스니펫에 문제가 있었기 때문에 코드펜의 예는 다음과 같습니다.

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

.neon {
  font-size: 20px;
  color: #fff;
  text-shadow: 0 0 8px yellow;
  animation: blinker 6s;
  animation-iteration-count: 1;
}
@keyframes blinker {
  0% {
    opacity: 0.2;
  }
  19% {
    opacity: 0.2;
  }
  20% {
    opacity: 1;
  }
  21% {
    opacity: 1;
  }
  22% {
    opacity: 0.2;
  }
  23% {
    opacity: 0.2;
  }
  36% {
    opacity: 0.2;
  }
  40% {
    opacity: 1;
  }
  41% {
    opacity: 0;
  }
  42% {
    opacity: 1;
  }
  43% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

사용했습니다.font-family: "Quicksand", sans-serif;

글꼴 가져오기(스타일 상단에 있음.css)

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap");

이것은 모두에게 좋은 예입니다.한번만 해보세요

.blinking_live {
    height: 15px;
    width: 15px;
    border-radius: 15px;
    background: #58C03D;
    animation: blink-live 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

@keyframes blink-live{

    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}


<div class="blinking_live"></div>

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

언급URL : https://stackoverflow.com/questions/16344354/how-to-make-blinking-flashing-text-with-css-3