การเลียนแบบแท็กกะพริบด้วยภาพเคลื่อนไหว CSS3

ฉันต้องการทำให้ชิ้นส่วนของข้อความกะพริบสไตล์โรงเรียนเก่าโดยไม่ใช้ javascript หรือตกแต่งข้อความ

ไม่มีช่วงการเปลี่ยนภาพเท่านั้น * กะพริบ *, * กะพริบ *, * กะพริบ *!

แก้ไข : นี่แตกต่างจากคำถามนั้นเพราะฉันขอให้กระพริบโดยไม่มีการเปลี่ยนอย่างต่อเนื่องในขณะที่ 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>

มันทำงานในกรณีของฉันกระพริบข้อความที่ช่วงเวลา 1s

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