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>4
your code might not run due to the following reason
- 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>
There are mainly two issues in your code:
- You have not closed the anchor tag properly, use “/” instead of “”.
- Your animation divs do not contain any elements as well as height to make animation or transition work.
Fix the above issues and it will work.