Крім того, якщо ви не хочете поступового переходу між показом та прихованням (наприклад, миготливий текстовий курсор), ви можете використовувати щось на кшталт:
/* Also use prefixes with @keyframes and animation to support current browsers */
@keyframes blinker {
from { visibility: visible }
to { visibility: hidden }
/* Alternatively you can do this:
0% { visibility: visible; }
50% { visibility: hidden; }
100% { visibility: visible; }
if you don't want to use `alternate` */
}
.cursor {
animation: blinker steps(1) 500ms infinite alternate;
}
Кожен 1s
.cursor
піде від visible
до hidden
.
Якщо анімація CSS не підтримується (наприклад, в деяких версіях Safari), ви можете повернутися до цього простого інтервалу JS:
(function(){
var show = 'visible'; // state var toggled by interval
var time = 500; // milliseconds between each interval
setInterval(function() {
// Toggle our visible state on each interval
show = (show === 'hidden') ? 'visible' : 'hidden';
// Get the cursor elements
var cursors = document.getElementsByClassName('cursor');
// We could do this outside the interval callback,
// but then it wouldn't be kept in sync with the DOM
// Loop through the cursor elements and update them to the current state
for (var i = 0; i < cursors.length; i++) {
cursors[i].style.visibility = show;
}
}, time);
})()
Цей простий JavaScript насправді дуже швидкий і в багатьох випадках може бути навіть кращим за замовчуванням, ніж CSS. Варто зазначити, що багато DOM-дзвінків роблять JS-анімацію повільною (наприклад, $ .animate (.) JQuery).
Це також має другу перевагу: якщо ви додасте .cursor
елементи пізніше, вони все одно будуть анімувати рівно в той же час, що й інші .cursor
, оскільки стан спільного доступу, це неможливо з CSS, наскільки я знаю.