CSS3 애니메이션으로 눈 깜빡임 태그 따라하기

CSS3 애니메이션으로 눈 깜빡임 태그 따라하기

자바스크립트나 텍스트 데코레이션을 사용하지 않고 옛날 스타일의 텍스트를 깜빡이게 만들고 싶습니다.

전환 없음, *blink*, *blink*, *blink*만!

---

이는 다른 질문의 OP가 점멸을 연속적인 전환으로 대체하는 방법을 묻는 반면, 연속적인 전환 없이 점멸을 요청하기 때문에 해당 질문과 다릅니다.

오리지널 넷스케이프<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.

키프레임 애니메이션에 대한 자세한 정보는 여기에서 확인할 수 있습니다.

제가 당신에게 약간의 속임수를 보여드리겠습니다.

Arkanciscan 말대로 CSS3 전환을 사용할 수 있습니다.하지만 그의 해결책은 원래의 태그와는 달라 보입니다.

당신이 정말로 해야 할 일은 다음과 같습니다.

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

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

제이에스피들 데모

이 CSS를 사용해 보십시오.

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

브라우저/ vendor별 접두사가 필요합니다. http://jsfiddle.net/es6e6/1/ .

사실 필요 없어요.visibility아니면opacity- 간단히 사용할 수 있습니다.color, 이것은 모든 "blinking"을 텍스트에만 유지할 수 있는 장점이 있습니다.

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.

Fiddle: http://jsfiddle.net/2r8JL/

이 일로 지옥에 가겠어요

=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 (버번으로 sass)

다른변주

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

부드럽게 깜박이는 텍스트 등을 원할 경우 다음 코드를 사용할 수 있습니다.

 .blinking {
    -webkit-animation: 1s blink ease infinite;
    -moz-animation: 1s blink ease infinite;
    -ms-animation: 1s blink ease infinite;
    -o-animation: 1s blink ease infinite;
    animation: 1s blink ease infinite;
  }

  @keyframes "blink" {

    from,
    to {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

  @-moz-keyframes blink {

    from,
    to {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

  @-webkit-keyframes "blink" {

    from,
    to {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

  @-ms-keyframes "blink" {

    from,
    to {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

  @-o-keyframes "blink" {

    from,
    to {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

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

1초 간격으로 텍스트를 깜박이는 제 경우에는 작동합니다.

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

야광 효과를 원한다면 이것을 사용하세요.

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

당신의 코드에 대한 아래의 해결책을 찾아주시기 바랍니다.

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

언급URL : https://stackoverflow.com/questions/13955163/imitating-a-blink-tag-with-css3-animations