如何避免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>