0
Ich habe diese snippet on Codepen erstellt: Die Erde dreht sich und das Auto bewegt sich. Wenn sich das Auto jedoch bewegt, dreht sich auch die Erde. Ich möchte, dass alle Elemente ihren eigenen Weg gehen.Zwei CSS-Animation interferieren miteinander
Warum beeinflusst das Auto die Erde, und wie kann das vermieden werden?
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>