Saat ini, saya memiliki kode ini:
@-webkit-keyframes blinker {
from { opacity: 1.0; }
to { opacity: 0.0; }
}
.waitingForConnection {
-webkit-animation-name: blinker;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
-webkit-animation-duration: 1.7s;
}
Berkedip, tetapi hanya berkedip "satu arah". Maksudku, itu hanya memudar, dan kemudian muncul kembali opacity: 1.0
, kemudian memudar lagi, muncul lagi, dan seterusnya ...
Saya ingin memudar, dan kemudian "bangkit" dari ini memudar lagi ke opacity: 1.0
. Apakah itu mungkin?
html
css
css-animations
opacity
ojek
sumber
sumber
Jawaban:
Anda Pengaturan pertama
opacity: 1;
dan kemudian Anda berakhir pada0
, sehingga dimulai dari0%
dan berakhir pada100%
, jadi bukan hanya mengatur opacity untuk0
di50%
dan sisanya akan mengurus dirinya sendiri.Demo
Di sini, saya mengatur durasi animasi menjadi
1 second
, dan kemudian saya mengaturtiming
untuklinear
. Itu berarti akan konstan sepanjang. Terakhir, saya menggunakaninfinite
. Itu berarti akan terus dan terus.Seperti yang dikomentari, ini tidak akan berfungsi pada versi Internet Explorer yang lebih lama, dan untuk itu Anda perlu menggunakan jQuery atau JavaScript ...
Terima kasih kepada Alnitak karena menyarankan pendekatan yang lebih baik .
Demo (Blinker menggunakan jQuery)
sumber
blinker
sebagai panggilan balik penyelesaian.fadeIn
panggilan.(function blink() { $('.blink_me').fadeOut(500).fadeIn(500, blink); })();
step-end
bukannyalinear
apa yang saya inginkan.Gunakan
alternate
nilai untukanimation-direction
(dan Anda tidak perlu menambahkan keframe dengan cara ini).CSS :
Saya telah menghapus
from
keyframe. Jika tidak ada, itu dihasilkan dari nilai yang Anda tetapkan untuk properti animasi (opacity
dalam hal ini) pada elemen, atau jika Anda belum menyetelnya (dan Anda belum dalam hal ini), dari nilai default (yang1
untukopacity
).Dan tolong jangan hanya menggunakan versi WebKit. Tambahkan yang tidak diperbaiki setelahnya juga. Jika Anda hanya ingin menulis lebih sedikit kode, gunakan singkatan .
sumber
cubic-bezier
bagian denganease-in-out
atau sesuatu yang lain: cubic-bezier.comCara terbaik untuk mendapatkan blink "100% aktif, 100% diskon" murni, seperti yang lama
<blink>
adalah seperti ini:sumber
color
properti dll. Hal-hal lain adalah workarounds atau animasi "fade".Atau jika Anda tidak menginginkan transisi bertahap antara acara dan sembunyikan (mis. Kursor teks yang berkedip), Anda bisa menggunakan sesuatu seperti:
Setiap
1s
.cursor
akan berubah darivisible
menjadihidden
.Jika animasi CSS tidak didukung (misalnya dalam beberapa versi Safari) Anda dapat mundur ke interval JS sederhana ini:
JavaScript sederhana ini sebenarnya sangat cepat dan dalam banyak kasus bahkan mungkin merupakan default yang lebih baik daripada CSS. Perlu dicatat bahwa banyak panggilan DOM yang membuat animasi JS lambat (mis. $ .Animate () JQuery).
Ini juga memiliki keuntungan kedua bahwa jika Anda menambahkan
.cursor
elemen nanti, mereka masih akan hidup pada waktu yang sama persis dengan yang lain.cursor
sejak negara dibagikan, ini tidak mungkin dengan CSS sejauh yang saya ketahui.sumber
Saya tidak tahu mengapa tetapi hanya menganimasikan
visibility
properti tidak bekerja di browser apa pun.Apa yang dapat Anda lakukan adalah menghidupkan
opacity
properti sedemikian rupa sehingga browser tidak memiliki cukup bingkai untuk memudar masuk atau keluar teks.Contoh:
sumber
step-start
(lihat jawaban saya).Ubah durasi dan opacity agar sesuai.
sumber
Tampilkan cuplikan kode
sumber
Terlambat tetapi ingin menambahkan yang baru dengan lebih banyak kerangka kunci ... di sini adalah contoh pada CodePen karena ada masalah dengan cuplikan kode bawaan:
sumber
sumber
Ini bekerja untuk saya dengan menggunakan class = blink untuk masing-masing elemen
Kode JS sederhana
sumber