Alternativamente, si no desea una transición gradual entre mostrar y ocultar (por ejemplo, un cursor de texto parpadeante) puede usar 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;
}
Todo 1s
.cursor
irá de visible
a hidden
.
Si la animación CSS no es compatible (por ejemplo, en algunas versiones de Safari), puede recurrir a este simple intervalo 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);
})()
Este simple JavaScript es realmente muy rápido y, en muchos casos, incluso puede ser un valor predeterminado mejor que el CSS. Vale la pena señalar que hay muchas llamadas DOM que hacen que las animaciones JS sean lentas (por ejemplo, $ .animate () de JQuery).
También tiene la segunda ventaja de que si agrega .cursor
elementos más adelante, aún se animarán exactamente al mismo tiempo que los demás .cursor
, ya que el estado es compartido, esto es imposible con CSS, que yo sepa.