如何在css中阻止子进程中的父动画？

Question

＆＃13;

＆＃13;

#path1{
position: absolute;
width:250px;
height:250px;
border-radius:100%;
text-align: center;
top:25%;
left:10%;
border:1px solid grey;
animation: round 3s infinite linear;
}
#path1:after{
  content:"";
position: absolute;
width:250px;
height:250px;
border-radius:100%;
text-align: center;
top:25%;
left:10%;
animation: round 3s infinite linear;
}
#earth{
position:relative;
width:40px;
height:40px;
background-color:orange;
border-radius:100%;
text-align: center;
box-shadow:1px 1px 30px grey;
margin-left:10px;
}
@keyframes round {
	from{
	transform: rotate(0deg);
		       
	}
	to {
		transform: rotate(-360deg);
		           
	}
}

＆＃13;

<div id="path1">
<p id="earth"></p>
<p>static text</p>
</div>

＆＃13;

＆＃13;

＆＃13;

我有一个Css动画代码See my Fiddle here。 父div是旋转的。但是孩子也会影响css.I也尝试了:after和:before css函数，但它没有工作。请如何防止子div与父动画。提前谢谢