Skip to main content
3 de 3
Modificada la animación y eliminado el uso de div innecesario
OscarGarcia
  • 28.5k
  • 3
  • 29
  • 64

No es necesario utilizar Javascript para esto, intenta con el siguiente código:

document.getElementById("p-btn").addEventListener("click", (e) => {
  document.getElementById("precaucion").style.display = "block";
});
#p-btn {
  background: rgba(204,0,51,0.4);
  padding: 5px;
  width: 70px;
  box-shadow: -2px 2px 3px #ac0033;
  color: white;
 }
#p-btn:active {
  box-shadow: -1px 1px 1px #890033;
  color: rgba(255,255,255,0.5);
}

#precaucion {
  text-transform: capitalize;  
  background: red;
  animation: alerta 1.5s linear 100ms infinite;
  opacity: 0;
  display: none;
}

@-webkit-keyframes alerta {
    from {opacity: 0;}
    25% {opacity: 1;}
    75% {opacity: 1;}
    to {opacity: 0;}
} 

@keyframes alerta {
    from {opacity: 0;}
    25% {opacity: 1;}
    75% {opacity: 1;}
    to {opacity: 0;}
}
<p id="p-btn">Pulse aquí</p>
<p id="precaucion">¡Tenga precaución!</p>

Básicamente eché mano de las transiciones CSS.

Camilo Bernal
  • 1.4k
  • 10
  • 23