How to make the element disappear from the screen after a second

Asked

Viewed 87 times

1

I created a code that the numbers increase and decrease on the screen with CSS, and created the Divs by javascript. However I need "GO!" after a second and I couldn’t find out.

 function start(){
                        var number = document.getElementById("number");        
                        number.innerHTML = `
                       
                        <div id="cinco">5</div>
                        <div id="quatro">4</div>
                        <div id="tres">3</div>
                        <div id="dois">2</div>
                        <div id="um">1</div>
                        <div id="go">GO!</div>
                       
                        `
                       
                      }  
.container {
 
  text-align: center;
  margin: 0 auto;
}

#cinco, #quatro, #tres, #dois, #um, #go {
  font-size: 0;
  animation: .5s ease-in-out 2 forwards alternate zoom;
}
#quatro {
  animation-delay: 1s;
}
#tres {
  animation-delay: 2s;
}
#dois {
  animation-delay: 3s;
}
#um {
  animation-delay: 4s;
}
#go {
  animation-delay: 5s;
  animation-iteration-count: 1;
 
}

@keyframes zoom {
    0% { font-size: 0; }  
    100% { font-size: 150px; }
 }
<body onload="start()">
    <div id="number" class="container"></div>
</body>

javascript

  • Brunno, you can ask in Portuguese, we are at [pt.so].

1 answer

3


A CSS-only option would be... First creates a new @keyframe and puts in it the vanishing effect you want, like your animation has 5s puts in this new @keyframe one animation-delay of 6s, so when the animation comes to an end he makes another animation to disappear.

inserir a descrição da imagem aqui

Like you do of font-size:0 for 150, I used transform: scale(0); to simulate the same effect on container that has the text inside, so it looks like it’s the same animation made with font-size, but it’s actually scale()

Follow the image code above:

function start() {
  var number = document.getElementById("number");
  number.innerHTML = `

  <div id="cinco">5</div>
  <div id="quatro">4</div>
  <div id="tres">3</div>
  <div id="dois">2</div>
  <div id="um">1</div>
  <div id="go">GO!</div>

  `

}
.container {

  text-align: center;
  margin: 0 auto;
}

#cinco,
#quatro,
#tres,
#dois,
#um,
#go {
  font-size: 0;
  animation: .5s ease-in-out 2 forwards alternate zoom;
}

#quatro {
  animation-delay: 1s;
}

#tres {
  animation-delay: 2s;
}

#dois {
  animation-delay: 3s;
}

#um {
  animation-delay: 4s;
}

#go {
  animation-delay: 5s;
  animation-iteration-count: 1;

}

@keyframes zoom {
  0% {
    font-size: 0;
  }

  100% {
    font-size: 150px;
  }
}

@keyframes some {
    to {
        transform: scale(0);
        transform-origin: center top;
    }
}

#number {
  animation: 0.5s some linear forwards;
  animation-delay: 6s;
}
<body onload="start()">
<div id="number" class="container"></div>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.