Ok, ¿cómo puedo hacer que una fuente desaparezca después de un tiempo y que otro ícono ocupe su lugar con un segundo de retraso y esto debería continuar en un bucle y estoy usando una fuente increíble, así que por favor ayuda?
puedes hacer algo como esto
const switchIcon = (container,newHtml, timeout) => { setTimeout(() => { container.innerHTML = '' setTimeout(() => { container.innerHTML = newHtml }, 1000) }, timeout) } switchIcon(document.getElementById('icon-container'), '<span> icon 2</span>', 3000) <div id="icon-container"> <span>icon 1</span> </div>En la parte superior de su inserción css
@keyframes icon1 { 0% {opacity: 1; z-index: 1000;} /* Change opacity as you like 1= visible 0=not visible, you can also add other % like 20% 10% to make it happen faster and add any css property*/ 50% {opacity: 0.5;} 100% {opacity: 0; z-index: -1;} } @keyframes icon2 { 0% {opacity: 0; z-index: -1;} /* Change opacity as you like 1= visible 0=not visible */ 50% {opacity: 0.5;} 100% {opacity: 1; z-index: 1000;} } /*If you need it clickable just add z-index or insead of z-index add visibility: hidden when opacity is 0 and visibility: visible to opacity 1*/ then add this to your first icon's css animation-name: icon1; animation-duration: 4s; //change seconds animation-iteration-count: infinite; and this to your second icon's css animation-name: icon2; animation-duration: 4s; /* Change seconds */ animation-iteration-count: infinite;No hice que funcionara como tú lo harías, pero puedes cambiar el valor entre ellos. puede usar la posición absoluta para que se coloquen uno encima del otro, recuerde que la posición absoluta necesita arriba o abajo: (cualquier px que desee) px; e izquierda o derecha: (cualquier px que quieras) px;. También establezca padre a relativo.
También puede agregar la propiedad de transición para que sea suave, siempre en el ejemplo css del icono