Pointer Class Freezes when User is Idle

Question

I "attached" a keyframe animation to my mouse pointer. Ideally, a pulse should appear around the mouse when the user is idle for 2 seconds, then disappear when they become active. I'm toggling the "pulse" class's visibility. There are two problems:

1. The keyframe animations is no longer attached to the mouse movement
2. when the user becomes idle, the animation will appear at any stage of the pulse. It may be very small and faint or thick and opaque, but the ring will be static until the user moves again:

var TimeoutID;

 function inputdetect() {
  // attaches event handler to specified event
  // takes event as string, function to run, and optional boolean
  // to indicate when the event propogates
  // these are false, so events "bubble up"
  this.addEventListener("mousemove",resetTimer,false);
  this.addEventListener("mousedown",resetTimer,false);
  this.addEventListener("mousewheel",resetTimer,false);
  this.addEventListener("keypress",resetTimer,false);
  this.addEventListener("touchmove",resetTimer,false);
  this.addEventListener("DOMmousescroll",resetTimer,false);
  this.addEventListener("MSpointermove",resetTimer,false);

  startTimer();
 }

 inputdetect();

 function startTimer() {
  //waits two seconds before calling inactive
  TimeoutID = window.setTimeout(goInactive,2000); // does it need to take the window variable??

 }

 function resetTimer(e) {
  window.clearTimeout(TimeoutID);
  goActive();

 }

 function goActive() {

  //what happens when the UI is not idle

  $('p').text("The UI is not idle.");
  $('.cursory').css("background-color","green");

  $('.pulse').css('visibility','hidden');
  startTimer();
 }

 function goInactive() {
  
  $('p').text("The UI is idle.");
  // REPLACING CURSOR WHEN UI IS IDLE
  //this part won't work
  $('.cursory').css("background-color","red");
  $('.pulse').css('visibility','visible');
  

 }

// THIS changes the pointer to a css element
 $(document).ready(function() { 

    $(document).on('mousemove', function(e) {
   $('.cursory').css({
    left: e.pageX,
    top: e.pageY
   });


  });
 

});

html {
   cursor: none;
   
 }
 .cursory {

   height: 10px;
   width: 10px;
   border-radius: 100%;
    margin: 0px;
     padding: 5px;
     
   background-color: green;
   background-clip: content-box;

   position: fixed;
   
 }

 .pulse {

  border: 3px solid blue;
  -webkit-border-radius:30px;
  height:18px;
  width:18px;
  position: fixed;
  z-index:-1;
      left:-7px;
     top:-7px;
     -webkit-animation: pulsate 1s ease-out;
     -webkit-animation-iteration-count: infinite; 
     opacity: 0.0

 }

 @-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <div class = "cursory"><div class = "pulse"></div></div>
<!--this is where the HTML will go*/-->
<p>hello</p>

emphasized text

Answer 1

Add another class to .pulse. And attach the animation to that class. When you don't want animation just remove the class. On reapplying the class animation will start from starting point so you won't see any inconsistency. Plus to be sure about you animation you give visibility: hidden; to .pulse. but give visibility: visible; in your additional class and mention your additional class like this .pulse.additionalClass. It will override your .pulse's visibility: hidden

Answer 2

@shishir-trivedi Okay, I tried adding the animation to the pulse class and:

 var TimeoutID;

 function inputdetect() {
  // attaches event handler to specified event
  // takes event as string, function to run, and optional boolean
  // to indicate when the event propogates
  // these are false, so events "bubble up"
  this.addEventListener("mousemove",resetTimer,false);
  this.addEventListener("mousedown",resetTimer,false);
  this.addEventListener("mousewheel",resetTimer,false);
  this.addEventListener("keypress",resetTimer,false);
  this.addEventListener("touchmove",resetTimer,false);
  this.addEventListener("DOMmousescroll",resetTimer,false);
  this.addEventListener("MSpointermove",resetTimer,false);

  startTimer();
 }

 inputdetect();

 function startTimer() {
  //waits two seconds before calling inactive
  TimeoutID = window.setTimeout(goInactive,2000); // does it need to take the window variable??

 }

 function resetTimer(e) {
  window.clearTimeout(TimeoutID);
  goActive();

 }

 function goActive() {

  //what happens when the UI is not idle

  $('p').text("The UI is not idle.");
  $('.cursory').css("background-color","green");
  $('.cursory').removeClass("pulse");
  startTimer();
 }

 function goInactive() {
  
  $('p').text("The UI is idle.");
  // REPLACING CURSOR WHEN UI IS IDLE
  //this part won't work
  $('.cursory').css("background-color","red");
  $('.cursory').addClass("pulse");
  

 }

// THIS changes the pointer to a css element
 $(document).ready(function() { 

    $(document).on('mousemove', function(e) {
  $('.cursory').css({
   left: e.pageX,
   top: e.pageY
   });
  });
 
});

 html {
   cursor: none;
   
 }
 .cursory {

   height: 10px;
   width: 10px;
   border-radius: 100%;
    margin: 0px;
     padding: 5px;
     
   background-color: green;
   background-clip: content-box;

   position: fixed;
   
 }

 .pulse {

  border: 3px solid blue;
  -webkit-border-radius:30px;
  height:18px;
  width:18px;
  /*position: fixed;*/
  z-index:-1;
      left:-7px;
     top:-7px;
     -webkit-animation: pulsate 1s ease-out;
     -webkit-animation-iteration-count: infinite; 
     opacity: 0.0

 }

 @-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class = "cursory"></div>
<!--this is where the HTML will go*/-->
<p>hello</p>

now the whole thing pulses. How do I make the inner circle remain the same size? I've been working on this for a few days. I'm very new to both CSS and jQuery, so please be patient with me.

I thought separating them into separate classes then attaching them would align their actions while keeping their specs separate but it appears to have mashed the .cursor class into the .pulse class.