添加动画类会影响其他类

Question

我正在编写一个在空闲时替换鼠标指针的函数。目前鼠标在浏览器窗口中为绿色，当鼠标移动到窗口外时变为红色和脉冲。我将 .pulse 类作为webkit动画添加到我的 .circle < / em> class。我的问题是内部的“空闲”圈不会保持相同的大小;相反，它随动画一起移动。如何将内圈保持固定尺寸？谢谢。

注意：

• .pulse 是webkit动画
• .circle 是内圈
• 的goActive 是“用户主动”功能， goInactive 是“用户空闲”功能。 在这两个函数中，我添加/删除了 .pulse 类 添加/删除动画。

如果有更复杂的方法，请告诉我。我很新。

	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>

TL; DR：

我怀疑当我添加webkit时，我已经覆盖了内圈的边界条件。如何确保圈子彼此保持独立但仍然由同一事件触发？