Como alternativa, se você não deseja uma transição gradual entre show e hide (por exemplo, um cursor de texto piscando), use algo como:
/* 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;
}
Todos 1s
.cursor
irão de visible
para hidden
.
Se a animação CSS não for suportada (por exemplo, em algumas versões do Safari), você poderá recorrer a este intervalo simples de 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);
})()
Esse JavaScript simples é realmente muito rápido e, em muitos casos, pode até ser um padrão melhor que o CSS. Vale a pena notar que são muitas as chamadas DOM que tornam as animações JS lentas (por exemplo, $ .animate () do JQuery).
Ele também tem a segunda vantagem de que, se você adicionar .cursor
elementos posteriormente, eles ainda serão animados exatamente ao mesmo tempo que outros .cursor
s, pois o estado é compartilhado; isso é impossível para o CSS, pelo que sei.