<div id="div1" >
{{hint}}
</div>
#div1 {
position: fixed;
left: 35%;
top: 32%;
width: 95px;
height: 70px;
background: rgb(221, 221, 221);
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
font-weight: 700;
color: rgb(136, 136, 136);
opacity: 0;
border-radius: 10px;
}
.play-first {
animation: myfirst 1.5s ;
}
.play-second {
animation: mysecond 1.5s ;
}
@keyframes myfirst
{
0% {opacity:0;}
40% {opacity:0.75;}
100% {opacity:0;}
}
@-webkit-keyframes myfirst
{
0% {opacity:0;}
40% {opacity:0.75;}
100% {opacity:0;}
}
@keyframes mysecond
{
0% {opacity:0;}
40% {opacity:0.75;}
100% {opacity:0;}
}
@-webkit-keyframes mysecond
{
0% {opacity:0;}
40% {opacity:0.75;}
100% {opacity:0;}
}
var oDiv=document.getElementById("div1");
if (oDiv.classList.contains('play-first')) {
oDiv.className = 'play-second';
} else {
oDiv.className = 'play-first';
}