CSS3 애니메이션으로 깜박임 태그 모방 스크립트 또는 텍스트 장식을

자바 스크립트 또는 텍스트 장식을 사용하지 않고 텍스트를 구식 스타일로 깜박이게하고 싶습니다.

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

편집 : 이것은 연속 전환없이 깜박임 을 요청하기 때문에이 질문 과 다릅니다 . 반면 다른 질문의 OP는 깜박임 을 연속 전환으로 대체 하는 방법을 묻습니다.

답변

원래 Netscape의 <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;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 0.0;
  }
}
.blink {
  animation: blink 1s step-start 0s infinite;
  -webkit-animation: blink 1s step-start 0s infinite;
}
<span class="blink">Blink</span>

스 니펫 확장

JSfiddle 데모

답변

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

스 니펫 확장

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

답변

실제로 visibility또는 필요가 없습니다 opacity-단순히 color텍스트를 “깜박임”으로 유지하는 장점이있는를 사용할 수 있습니다 .

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.

스 니펫 확장

피들 : 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 (버번과 함께 엉덩이)

답변

또 다른 변형

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

스 니펫 확장

답변

제 경우에는 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; }
}