Meniru blink tag dengan animasi CSS3


149

Saya benar-benar ingin membuat sepotong teks berkedip gaya old-school tanpa menggunakan javascript atau dekorasi teks.

Tidak ada transisi, hanya * kedip *, * kedip *, * kedip *!


EDIT : Ini berbeda dari pertanyaan itu karena saya meminta berkedip tanpa transisi terus-menerus, sedangkan OP dari pertanyaan lain bertanya bagaimana cara mengganti berkedip dengan transisi berkelanjutan


1
Jawaban terbaik yang saya temukan untuk ini sayangnya dihapus oleh poster aslinya, @ m93a, jadi belum dapat di-upvotasikan. Saya pikir jawabannya harus dihapus dan dihapus, karena ini adalah solusi paling sederhana yang menghasilkan efek blink terbaik, dan itu berfungsi di semua versi browser utama saat ini . Anda juga dapat membaca posting blog pendek tentang solusi yang sama di Emulasi <blink> menggunakan animasi WebKit CSS3 .

Apa yang saya tidak mengerti adalah mengapa setiap jawaban di sini tampaknya memiliki @-webkit-keyframesaturan setelah aturan yang tidak diperbaiki @keyframes, dan beberapa bahkan memiliki -webkit-animationdeklarasi setelah yang tidak diperbaiki.
BoltClock

@BoltClock: Itu karena animasi CSS3 relatif baru dan belum stabil di browser Webkit. Yang disebut "awalan" ada di sini untuk pengembang yang ingin menggunakan animasi bahkan jika mereka tidak stabil dan belum selesai.
m93a

@ m93a: Saya tahu itu, tapi saya bertanya mengapa mereka ditempatkan setelah aturan yang tidak diperbaiki dan bukan sebelumnya (ternyata saya tidak memasukkan ungkapan itu dalam komentar asli saya, kesalahan saya).
BoltClock

Jawaban:


242

Netscape asli <blink>memiliki siklus tugas 80%. Ini cukup dekat, meskipun yang sebenarnya <blink>hanya memengaruhi teks:

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

Anda dapat menemukan info lebih lanjut tentang Animasi Keyframe di sini .


2
Ya, ini jauh lebih sederhana. Anda dapat menambahkan awalan webkit untuk membuatnya berfungsi di Chrome dan Safari.
m93a

2
Ini mungkin tidak berfungsi di Chrome / safari tanpa awalan webkit.
David Pelaez

2
Yang saya senang lakukan adalah, alih-alih membuat blink sebuah kelas, membuat blink sebagai tag (dengan blink { animation: blink 1s steps(5, start) infinite; -webkit-animation: blink 1s steps(5, start) infinite; }). Dengan begitu, Anda bisa menggunakan <blink>tag, alih-alih <span class="blink">=)
416E64726577

Catatan: Ini hanya OP yang diminta "<blink> imitasi". Tidak dapat digunakan dengan colorproperti yaitu sebagai animasi "hidup" off-off.
Martin Schneider

97

Mari saya tunjukkan sedikit trik.

Seperti yang dikatakan Arkanciscan , Anda dapat menggunakan transisi CSS3. Tapi solusinya terlihat berbeda dari tag aslinya.

Yang perlu Anda lakukan adalah ini:

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

Demo JSfiddle


@ Empat Puluh Dua Maaf, saya lupa awalan -webkit- . Saya pikir itu berfungsi, untuk semua peramban yang sebenarnya selain Chrome dan Safari. Sekarang, setelah pembaruan, ini akan berfungsi untuk Firefox, Chrome, Opera, Safari dan MSIE10.
m93a

Seperti yang ditulis, jawaban ini memang akan berfungsi di versi Firefox, Chrome, Safari, dan IE saat ini .

2
Tidak berfungsi karena kesalahan ketik: pada bagian webkit, nama animasi blink, hilang. Tetap.
Andrea Ligios

1
Berfungsi dengan baik, terima kasih, ini implementasi saya berdasarkan solusi Anda: jsfiddle.net/gnx4mqc4
Hamid Behnam

1
@ m93a: 0% 100% { opacity: 1.0; }Bagian tampaknya berlebihan, karena mereka default, bukan?
jamadagni

48

Coba CSS ini

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

Anda memerlukan awalan khusus peramban / vendor: http://jsfiddle.net/es6e6/1/ .


1
Tidak ada yang seperti -ms-animasi atau -o-animasi dan -moz-animasi hanya dalam versi 15, jangan gunakan sekarang. Lihatlah caniuse.com untuk melihat dukungan aktual. Maaf tapi saya tidak akan menerima pertanyaan ini :( PS: Anda dapat menggunakan 'edit' pada jawaban orang lain.
m93a

Ini hanya kebiasaan lama saya yang buruk - tambahkan sufiks ke semua properti CSS3 baru .. Jawaban yang diperbarui.
Belyash

ini bukan "blink" tetapi "blink-fadeOut".
Martin Schneider

30

Sebenarnya tidak perlu visibilityatau opacity- Anda hanya dapat menggunakan color, yang memiliki sisi atas menjaga "berkedip" hanya untuk teks:

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/


4
Hebat! Ini adalah satu-satunya solusi yang memberikan kedipan teks saja. Semua solusi lain juga mengedipkan latar belakang elemen. Untuk menguji, gunakan a <span>dengan putih pada teks biru <body>dengan latar belakang hijau. Hanya dalam solusi ini, latar belakang rentang biru tidak akan berkedip.
jamadagni

10

Saya akan ke neraka untuk ini:

=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 (maaf dengan bourbon)


1
Codepen Anda menghasilkan Undefined mixin 'experimental'.kesalahan, dan dengan demikian sepertinya tidak akan mengkompilasi dan menampilkan animasi blink.

6

Variasi lain

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


2

Ini berfungsi dalam kasus saya berkedip teks pada interval 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; }
}

-3

jika Anda ingin efek cahaya gunakan ini

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

-5

Silakan temukan solusi di bawah ini untuk kode Anda.

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.