Making animation on event trigger with Javascript and CSS

Question

I am new using javascript and CSS and am currently trying to make a small animation that is triggered at event call. The animation is simple, and only changes the transparancy of an image. My problem is that that the animation only works every other time the function is called.

A function called "pulse()" is called every time I want the animation to happen.

 <script>
    function pulse() {
      $('.transform').toggleClass('transform-active');
    }
 </script>

The CSS looks like this:

.lock-image {

}

.transform {
  -webkit-transition: all 1s ease-in-out;  
  -moz-transition: all 1s ease-in-out;  
  -o-transition: all 1s ease-in-out;  
  -ms-transition: all 1s ease-in-out;  
  transition: all 1s ease-in-out;
}

.transform-active {
  /*animation-delay: 2s;*/
  animation-iteration-count: 1;
  animation: pulse 0.5s;
  animation-direction: alternate;
}


@keyframes pulse {
  0% {
    opacity: 1;
  }
  50%{
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

The image on which the animation is done is done like this;

  <div class="lock-image transform">
    <img id="myImage" src="pic_locked.png" class="img-responsive " style="display:inline" alt="Lock" width="100" height="80">
  </div>

How can I change the code so the animation happens every time the function pulse() is called?

How are you planning to trigger the function call ? as in on which event ? — Nikhil Nanjappa
– Nikhil Nanjappa, Commented May 25, 2017 at 9:07
why is this question UPvoted ? it lacks explanation on when do you want the pulse() function to trigger ( click, hover etc. ) — Mihai T
– Mihai T, Commented May 25, 2017 at 9:16
Sorry about that. The pulse() is called every time I receive a message, using an addListener function. This is for an application, receiving packets with LoRa communication. — Johanna
– Johanna, Commented May 25, 2017 at 9:20

George · Accepted Answer · 2017-05-25 09:10:15Z

You can add an event handler to handle when the animation ends to remove the class. For the purpose of the example, I've changed the image to a red div

function pulse() {
  $('.transform').addClass('transform-active');
}

$('.transform').on('webkitAnimationEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
  $(this).removeClass('transform-active');
})

#myImage {
  display: block;
  background-color: red;
  width: 100px;
  height: 80px;
}

.transform {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.transform-active {
  /*animation-delay: 2s;*/
  animation-iteration-count: 1;
  animation: pulse 0.5s;
  animation-direction: alternate;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lock-image transform">
  <div id="myImage"></div>
</div>
<br/>
<button type="button" onclick="pulse()">Pulse</button>

Collectives™ on Stack Overflow

Making animation on event trigger with Javascript and CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related