Bắt chước thẻ nhấp nháy với hình động CSS3

Tôi thực sự muốn làm cho một đoạn văn bản nhấp nháy kiểu cũ mà không cần sử dụng javascript hoặc trang trí văn bản.

Không có chuyển tiếp, chỉ * nháy *, * nháy *, * nháy *!

EDIT : Điều này khác với câu hỏi đó bởi vì tôi yêu cầu chớp mắt mà không chuyển tiếp liên tục, trong khi OP của các câu hỏi khác hỏi làm thế nào để thay thế nhấp nháy bằng chuyển tiếp liên tục

Netscape ban đầu <blink>có chu kỳ thuế 80%. Điều này đến khá gần, mặc dù thực tế <blink>chỉ ảnh hưởng đến văn bản:

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

Bạn có thể tìm thêm thông tin về Keyframe Animations tại đây .

Hãy để tôi chỉ cho bạn một mẹo nhỏ.

Như Arkanciscan đã nói , bạn có thể sử dụng các chuyển tiếp CSS3. Nhưng giải pháp của anh ấy trông khác với thẻ ban đầu.

Những gì bạn thực sự cần làm là đây:

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

Trình diễn thử

Hãy thử CSS này

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

Bạn cần tiền tố cụ thể của trình duyệt / nhà cung cấp: http://jsfiddle.net/es6e6/1/ .

Thực sự không cần visibilityhoặc opacity- bạn chỉ có thể sử dụng color, điều này có mặt trái là chỉ giữ bất kỳ "nhấp nháy" nào cho văn bản:

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.

Câu đố: http://jsfiddle.net/2r8JL/

Tôi sẽ xuống địa ngục vì điều này:

=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 với bourbon)

Một biến thể khác

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

Nó hoạt động trong trường hợp của tôi nhấp nháy văn bản trong khoảng thời gian 1 giây.

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

Nếu bạn muốn một số hiệu ứng phát sáng sử dụng này

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

Vui lòng tìm giải pháp dưới đây cho mã của bạn.

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