0

I'm a bit confused about how to trigger multiple animations for an element using javascript.

I'm trying to get an element (.hud) to fade-in and also bounce when clicked. Currently it will only do one or the other. The second animation class is being added to the element in a on click event. The class gets added but the animation does not play. How would I construct my code for the animation to fade-in and also bounce on click?

<!DOCTYPE html>
<html>
<head>

<style> 
.anim {
  animation-name: bounceIn_1;
  animation-duration: .5s;
}

.hud {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: fade-in;
  animation-duration: .5s;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes bounceIn_1{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}

</style>
</head>
<body>

<p>This box should fade in and bounce on click</p>

<div class="hud"></div>

<script>

element = document.querySelector('.hud');
  console.log(element);

// reset the transition by...
element.addEventListener("click", function(e) {
  console.log("clicked");
  e.preventDefault;
  element.classList.remove("anim");
  void element.offsetWidth;
  element.classList.add("anim");
}, false);
</script>
</body>
</html>
lawrencehagman
  • 471
  • 1
  • 3
  • 16
  • 1
    Does this answer your question? [Play multiple CSS animations at the same time](https://stackoverflow.com/questions/26986129/play-multiple-css-animations-at-the-same-time) – mttetc Aug 12 '20 at 18:23
  • Not exactly. I need to play multiple animations on the same element. – lawrencehagman Aug 12 '20 at 18:25

3 Answers3

2

Was it so necessary for you? In order for the animation in your example to work constantly, a reset function is needed.

element = document.querySelector('#red_box');
  console.log(element);

element.addEventListener("click", function(e) {
  e.preventDefault;
  console.log("clicked");
  element.classList.remove("hud");
  element.classList.remove("anim");
  void element.offsetWidth;
  element.classList.add("anim");
}, false);

/*$(".hud").click(function () {
    var $this = $(this);
    $this = reset($this);
    $this.addClass("anim bounceIn_1");
    console.log("clicked");
});*/
.anim {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: bounceIn_1;
  animation-duration: .5s;
}

.hud {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: fade-in;
  animation-duration: .5s;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes bounceIn_1 {0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <p>This box should fade in and bounce on click</p>
  <div id="red_box" class="hud"></div>
</body>
s.kuznetsov
  • 14,870
  • 3
  • 10
  • 25
  • Thanks for the example Sergey. I don't think I'm getting an answer to my question. It appears you are using Jquery to create an element outside of the element. Is there a way to play multiple animations on the element with javascript? – lawrencehagman Aug 12 '20 at 20:35
  • 1
    I can redo my answer to js :) – s.kuznetsov Aug 12 '20 at 20:37
  • Hi Sergey, that would be helpful. Your example works great but I'm not sure exactly how to get it to work. – lawrencehagman Aug 12 '20 at 20:57
  • @lawrencehagman, hello, i redid my answer to js. Also, add `id="red_box"` to the `div`. – s.kuznetsov Aug 12 '20 at 21:08
  • did my revised answer help you? – s.kuznetsov Aug 12 '20 at 21:35
  • Hi Sergey, I'm afraid it doesn't answer the original question. I need to fire "Multiple" animations. I've changed my example above to illustrate. I have to preserve the style in the .hud class and be able play another animation without removing the style in the .hud class. I'm now understanding there may not be a way to do this. I'm going to try and do it with an inline style change. – lawrencehagman Aug 12 '20 at 22:05
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/219711/discussion-between-lawrencehagman-and-sergey-kuznetsov). – lawrencehagman Aug 12 '20 at 22:08
1

Have you tried to put a comma in your .anim class?

animation: bounceIn_1 .5s, fade-in .5s

monkey
  • 526
  • 7
  • 21
mttetc
  • 711
  • 5
  • 12
  • Thank you. If I set the animation property to a list of animation names, how do I trigger them independently? I will try it, seems as though the bounce would play and then the fade-in would play which is not the intent. I'm sorry, I'm confused on some of the animation basics with css. – lawrencehagman Aug 12 '20 at 20:39
  • the animation list is just for you .anim class, you could use a totally separate class, didn't you want to trigger them at the same time? – mttetc Aug 12 '20 at 20:45
  • Hi there, thanks for the help. The box fades in on load, then bounces on click. – lawrencehagman Aug 12 '20 at 20:56
0

You need to put the 2 animation in the same css class and make sure that the removing and the adding of that class are done in 2 separate frames.
The first issue can be easily solved by putting a comma between the 2 animations which are now in the class .anim.
The second issue is a little bit tricky but the window.requestAnimationFrame() function will solve it !
Here you have the modified code so that you can better understand:

element = document.querySelector('.hud');
  console.log(element);

// reset the transition by...
element.addEventListener("click", function(e) {
  console.log("clicked");
  e.preventDefault;
  element.classList.remove("anim");
  void element.offsetWidth;
  window.requestAnimationFrame(() => element.classList.add("anim")); /* The add() will be done before the next repaint so that we can see the change */
}, false);
.anim {
  animation-name: fade-in, bounceIn_1;
  animation-duration: .5s;
}

.hud {
  width: 100px;
  height: 100px;
  background-color: red;
  //animation-name: fade-in; /* Remove this */
  //animation-duration: .5s; /* Remove this */
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes bounceIn_1{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}
<body>
  <p>This box should fade in and bounce on click</p>
  <div class="hud"></div>
</body>

Quick tip: with this method you can play as many animation as you want on the same element, just add its name to the .anim animations list and you're done!
Cristian Davide Conte
  • 1,231
  • 1
  • 8
  • 25