如何避免css中儿童的级联动画（@keyframe）？

Question

你知道我怎么能避免那些孩子不与父母一起生活吗？

＆＃13;

＆＃13;

@keyframes rotate
{
	from {
		transform: rotate(0deg)
	}
	to {
		transform: rotate(360deg)
	}
}

.gradient {
	width: 200px;
	height: 200px;
  position: relative;
  top: 100px;
	margin: 0 auto;
  border: 20px solid rgba(0, 0, 0, 0);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  background-image: linear-gradient(white, white), linear-gradient(#ff0000, #0000ff);
  background-origin: border-box;
  background-clip: content-box, border-box;
  animation: rotate 5s infinite linear;
}

.gradientitem {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  margin: -15px; 
  background-color: #999999;
}

＆＃13;

<div class="gradient">
  <div class="gradientitem" style="transform: rotate(180deg) translate(100px) rotate(180deg);"></div>
  <div class="gradientitem" style="transform: rotate(0deg) translate(100px) rotate(-0deg);"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

所以在这里你可以看到我的问题的一个例子，两个小圆圈正在旋转大圆圈。我尝试了不同的东西，比如改变位置或者动画：没有＆＃34;为孩子们......

Answer 1

为渐变div内的动画创建一个新元素

<div class="gradient_animation"></div>

将动画css添加到此课程中。它有效。！

@keyframes rotate
{
	from {
		transform: rotate(0deg)
	}
	to {
		transform: rotate(360deg)
	}
}

.gradient {
	width: 200px;
	height: 200px;
  position: relative;
margin: 100px;
}

.gradient_animation{
  position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
  border: 20px solid rgba(0, 0, 0, 0);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  background-image: linear-gradient(white, white), linear-gradient(#ff0000, #0000ff);
  background-origin: border-box;
  background-clip: content-box, border-box;
  animation: rotate 5s infinite linear;
}

.gradientitem {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  margin: -15px; 
  background-color: #999999;
}

<div class="gradient">
<div class="gradient_animation"></div>
  <div class="gradientitem" style="transform: rotate(180deg) translate(100px) rotate(180deg);"></div>
  <div class="gradientitem" style="transform: rotate(0deg) translate(100px) rotate(-0deg);"></div>
</div>