兩個CSS動畫相互干擾

我創建了這個snippet on Codepen：地球旋轉，汽車移動。但是，當汽車移動時，它也會使地球旋轉。我希望所有的元素都走自己的路。兩個CSS動畫相互干擾

爲什麼汽車會影響地球，怎麼可以避免呢？

body { 
 
    background: url(https://news.vanderbilt.edu/files/NASA_SMBH1.jpg); 
 
    background-size: 1000px; 
 
} 
 

 
#firstimg { 
 
    background-image: url(http://www.21tech.ir/dfxhfgh.gif); 
 
    position: absolute; 
 
    background-repeat: no-repeat; 
 
    background-size: 100px; 
 
    animation: anim1 14s infinite linear; 
 
    margin: 40px; 
 
} 
 

 
#earth { 
 
    margin-left: 100px; 
 
    width: 500px; 
 
    height: 500px; 
 
    background: url(http://www.drodd.com/images14/map-of-earth1.jpg); 
 
    border-radius: 50%; 
 
    background-size: 1000px; 
 
    box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0), inset -3px 0 6px 2px rgba(255, 255, 255, 0.2); 
 
    animation-name: rotate; 
 
    animation-duration: 30s; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: linear; 
 
    filter: brightness(50%); 
 
} 
 

 
@keyframes rotate { 
 
    from { 
 
    background-position-x: 0px; 
 
    } 
 
    to { 
 
    background-position-x: 1000px; 
 
    } 
 
} 
 

 
@keyframes anim1 { 
 
    0%, 
 
    100% { 
 
    transform: translate(0, 0) rotate(0deg) 
 
    } 
 
    50% { 
 
    transform: translate(20px, 20px) rotate(10deg) 
 
    } 
 
}

<div id="firstimg"> 
 
    <div> 
 
    <div id="earth"></div>

來源

2017-03-05 ata

您還沒有關閉，您firstimg div標籤，因此它運行的一個DIV

<div id="firstimg"></div> 
<div id="earth"></div>

關注Codepen

下

來源

2017-03-05 10:09:40

兩個CSS動畫相互干擾

回答

相關問題