Question 404575 in Html Question posted in
Some basic documentation can be found here.

Html – How to trigger multiple animations when the user clicks on the <a> (link)

I have this Html code and I want all the animations to be played after clicking on the link :

document.querySelector('.play').addEventListener('click', function() {
  document.querySelector('.trans-up').style.animationPlayState = 'running';
  document.querySelector('.trans-mid').style.animationPlayState = 'running';
  document.querySelector('.trans-down').style.animationPlayState = 'running';
});
.trans-up {
  animation: trans-up-anim 1.8s forwards;
}

.trans-down {
  animation: trans-dow -anim 1.5s forwards;
}

.trans-mid {
  animation: trans-down-anim 1.3s forwards;
}

@keyframes trans-up-anim {
  0% {
    top: -100%
  }
}

@keyframes trans-down-anim {
  0% {
    bottom: -100%
  }
}
<a class="play">click on me<a>

<div class="trans-up"></div>

<div class="trans-mid"></div>

<div class="trans-down"></div>
Tags:

2

Answers


  1. 0

    your code might not run due to the following reason

    1. Div tag does not have height and width
      2.Its important you give your div a position of relative, and also, you can add a transition to your CSS. A sample is provided below for you to use have a guide
    document.querySelector('.play').addEventListener('click', function() {

      const target1 = document.querySelector('.trans-up');
      const target2 = document.querySelector('.trans-mid');
      const target3 = document.querySelector('.trans-down');     
      
      target1.classList.add('trans-up-animation');
      target2.classList.add('trans-mid-animation');
      target3.classList.add('trans-down-animation');
});
    .trans-up-animation{
   position: relative;
   animation: trans-up-anim 2s forwards ease-out;
}
.trans-down-animation{
   transition: middle 2s running;
   animation : trans-down-anim 1.5s forwards;
}
.trans-mid-animation{
   transition: middle 4s running;
   animation : trans-down-anim 1.3s forwards;
}

@keyframes trans-up-anim {
/* Start left off screen */
  0% {
    transform: translateX(-100%);
  }
  /* Move to visible position within 8% of 9 seconds (less than a second). */
  8% {
    transform: translateX(0);
  } 
  /* Stay until at least 3 second mark (33% of 9s). */
  33.33% {
    transform: translateX(0);
  } 
  /* Move offscreen to the right while
     the next slide is moving in.
     Same duration as slide-in (8%), but starting at 33.33%,
     so 33.33% + 8% = 41.33%.
  */
  41.33% {
    transform: translateX(100%);
  } 
  /* Stay there until the end. */
  100% {
    transform: translateX(100%);
  }

}
@keyframes trans-down-anim {
   to {
    transform: scale(1.5);
  }
} 
    <a class="play" href="#">click on me</a>

<div class="trans-up" style="width:100px; height:20px; background:red; position:relative:"></div>

<div class="trans-mid" style="width:100px; height:20px; background:black;  position:relative:"></div>

<div class="trans-down" style="width:100px; height:20px; background:blue;  position:relative:"></div>
    Login or Signup to reply.
  2. 0

    click on me<a>

    the problem arises from the fact that you have not given content to the divs you want to animate and that is why the animations do not work

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search