jquery - Adding Animation Class Affects Other Classes -

i'm writing function replaces mouse pointer when idle. mouse green when in browser window , turns red , pulses when mouse moved outside of window.i added .pulse class webkit animation .circle class. problem inner "idle" circle not remain same size; instead moves animation. how keep inner circle fixed size? thank you.

notes:

• .pulse webkit animation
• .circle inner circle
• goactive "user-active" function, goinactive "user-idle" function. in these 2 functions added/ removed .pulse class add/remove animation.

if there's more sophisticated way this, please let me know. i'm new.

	var timeoutid;    	function inputdetect() {  		// attaches event handler specified event  		// takes event string, function run, , optional boolean  		// indicate when event propogates  		// these false, 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 2 seconds before calling inactive  		timeoutid = window.settimeout(goinactive,2000); // need take window variable??    	}    	function resettimer(e) {  		window.cleartimeout(timeoutid);  		goactive();    	}    	function goactive() {    		//what happens when ui not idle    		$('p').text("the ui not idle.");  		$('.cursory').css("background-color","green");  		$('.cursory').removeclass("pulse");  		starttimer();  	}    	function goinactive() {  		  		$('p').text("the ui idle.");  		// replacing cursor when ui idle  		//this part won't work  		$('.cursory').css("background-color","red");  		$('.cursory').addclass("pulse");  		    	}    // changes pointer 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 html go*/-->  <p>hello</p>

tl;dr:

i suspect i've overwritten border conditions inner circle when add webkit one. how can ensure circles maintain independence each other still triggered same event?