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

Question

你知道我怎么能避免孩子div与父母不动画？

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

 
.gradient { 
 
\t width: 200px; 
 
\t height: 200px; 
 
    position: relative; 
 
    top: 100px; 
 
\t 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; 
 
}

<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>

所以在这里你可以看到这两个小圆圈与大圆圈转动我的问题的一个例子。我尝试不同的东西如改变位置或“动画：无”为孩子们...

Answer 1

为动画创建一个新的元素梯度格

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

里面添加动画CSS这一类。有用。！

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

 
.gradient { 
 
\t width: 200px; 
 
\t 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>