Span tag disappear after few seconds-CodePudding

I have two div those contain h tag inside which I have a span tag those contain letters

First Div

<div >
  <h6  >
          <span >A</span>
          <span >B</span>
          <span >C</span>
          <span >D</span>
          <span >E</span>
          <span >F</span>
    </h6>
</div>

Second Div

<div >
  <h6  >
          <span >G</span>
          <span >H</span>
          <span >&nbsp;</span> 
          <span >I</span>
          <span >J</span>
    </h6>
</div>

First div starts from left top of the screen and scales to a particular location using keyframe

Second div starts from few pixels below the first div of the screen and scales to a particular location using keyframe

I want letters EF in startname and <whitespace>IJ in lastname to disappear after few seconds of startname and lastname align

Here's the

CodePudding user response：

The method getElementById() will return only the first element with that id. You can use classes and getElementsByClassName(), which returns the list of elements with that class name. Here is the code.

CodePudding user response：

The error is on repeating id fadeout more than once.

You need to create a new class with the styles you want and put it together with letters: . Just a space between.

CodePudding user response：

Here is the result which can help you.

Steps need to remember

HTML attribute ID will be use on single element
You can use getElementsByClassName() or querySelectorAll() to apply opacity in multiple elements.

window.onload = function() {
  window.setTimeout(fadeout, 4000); //8 seconds
}
function fadeout() {
    document.querySelectorAll('span.fadeout').forEach(el => {
        el.style.opacity = 0;
    });
}

.startname {
  width: 150px;
  height: 150px;
  background: red;
  position: relative;
  animation: startnamemymove 5s 1 forwards;
  display: flex;
    align-items: center;
    justify-content:flex-end;

}
.fadeout {
  opacity: 1;
  transition: 3s opacity;
}

.endname {
  width: 150px;
  height: 150px;
  background: red;
  position: relative;
  animation: endnamemymove 5s 1 forwards;
  display: flex;
    align-items: center;
}

@keyframes startnamemymove {
  from {top: 0px;
  left:0px;
  transform: scale(.5);}
  to {top:150px;left: 200px;
  transform: scale(2.0);
  }
}
@keyframes endnamemymove {
  from {top: 100px;
  left:100px;
  transform: scale(.5);}
  to {top:0px;left: 500px;
  transform: scale(2.0);
  }
}

<h1>The @keyframes Rule</h1>

<div >
  <h6  >
          <span >A</span>
          <span >B</span>
          <span >C</span>
          <span >D</span>
          <span >E</span>
          <span >F</span>
   </h6>
</div>
<div >
  <h6  >
          <span >G</span>
          <span >H</span>
          <span >&nbsp;</span>      
          <span >I</span>
          <span >J</span>
    </h6>
</div>

CodePudding user response：

You can't use same id in several elements. Please use class.

CodePudding user response：

With the help of the answers I got here I was able to get it working with this code

.fadeout {
    /* Firefox */
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
    /* Safari and Chrome */
    /* Opera */
animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}

But after the fadeout disappear the containers don't update to join the two names I still have with space in the place of the the fadeout span