В качестве альтернативы, если вы не хотите постепенного перехода между показом и скрытием (например, мигание текстового курсора), вы можете использовать что-то вроде:
/* 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.