css点击动画

做了一个点击出现水纹的css动画效果。

效果预览：

HTML：

<div id="star">
		<em id="cir"></em>
		<em class="em1"></em>
		<em class="em2"></em>
</div>

css：

#star{
		margin:100px;
		width:500px;
		height:500px;
		position:relative;
	}
	#star #cir{
		width:30px;	height:30px;
		position:absolute;
		top:35px; 	left:35px; 
		background:rgba(144,200,215,1);
		box-shadow: 0px 0px 5px 2px #888888;
		border-radius:50%;
		cursor:pointer;
		z-index:1;
	}
	#star .cir1::after{
		content:"";
		width: 100px;	height: 100px; 
		position:absolute;
		top: 0px; 	left:0px; 
		background:rgba(144,205,215,1);
		border:rgba(144,205,215,0.8) 1px solid;
		box-shadow: 0 0 8px 2px rgba(144,200,255,0.8);
		border-radius:50%;
		opacity:0;
		animation:circles 1s 0.5s 1 linear;
		-webkit-animation:circles  1s 0.5s 1 linear; /* Safari 与 Chrome */		
	}
	#star .cir2::after{
		content:"";
		width: 100px;	height: 100px; 
		position:absolute;
		top: 0px; 	left: 0px; 
		background:rgba(144,205,215,0.3);
		border:rgba(144,205,215,1) 1px solid;
		box-shadow: 0 0 10px 2px rgba(144,205,215,0.8);
		border-radius:50%;
		opacity:0;
		animation:circles 1.5s  1 linear;	
		-webkit-animation:circles 1.5s  1 linear; /* Safari 与 Chrome */
	}
	
	@keyframes circles{
		0%{opacity: 0;transform: scale(0);}
		50%{opacity: 1;transform: scale(0.5);}
		100%{opacity: 0;transform: scale(1);}
	}
	
	@-webkit-keyframes circles{ /* Safari 与 Chrome */
  		0%{opacity: 0;transform: scale(0);}
		50%{opacity: 1;transform: scale(0.5);}
		100%{opacity: 0;transform: scale(1);}
	}

jQuery：

 $(document).ready(function () {
    $('#cir').on("click",function() {
        $('.em1').addClass("cir1");
		$('.em2').addClass("cir2");
        });
	
	$('#star')[0].addEventListener("animationend",function(){
		$('.em1').removeClass("cir1");
		$('.em2').removeClass("cir2");
		});
	
});

在写jQuery内容的时候遇到了两个问题：

1、怎么样使动画在点击后能够重复使用呢？

      点击加上动画的样式，动画播完去除动画样式。去除样式时需要用到动画事件 animationend，该事件在 CSS 动画结束播放时触发。

2、使用addEventListener（）方法添加事件时，发生错误，控制台显示：$(...).addEventListener is not a function

因为当时我写法是：

$('#star').addEventListener("animationend",function(){
       。。。
        });

在$('#star')加上 [0] 就不报错了；或者使用document.getElementById("star")代替也不报错。