animation goes out of place when I zoom out

Asked

Viewed 27 times

-1

Good morning, I’m a beginner programmer, I was doing a solar system css animation with Divs, the problem is that not all elements fit in the same space when the zoom is normal so when I zoom in, they go out of place (except the sun is not animated). I tried using the flex display, but when I do this the animation to

I’m going to post the css code of mercury and the sun, because the others are very similar to it

#mercurio {
width: 10px;
height: 10px;
border-radius: 50%;
background-color:white;
position:absolute;
left: 660px;
top: 300px;

animation-name: mercurio;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;

}

 #sol{
  background-color: yellow;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position:relative;
  margin-left: auto;
  margin-right: auto;
  top:250px;
  text-decoration-color: white;

now html

<!DOCTYPE html>
Solar System 
<div id="sol"></div>
<div id="mercurio"></div>
<div id="venus"></div>
<div id="terra"></div>
<div id="marte"></div>
<div id="jupiter"></div>
<div id="saturno"></div>
<div id="urano"></div>
<div id="netuno"></div>
css3 css-animations

  • Guy puts the html so that at least to simulate his problem ;)

  • perdao Ugo, I am new to the site as well as programmer do not know very well how to use, now it is giving to execute the code?

1 answer

-3

In HTML:

      <div id="sol">
        <div id="mercurio"></div>
        <div id="venus"></div>
        <div id="terra"></div>
        <div id="marte"></div>
        <div id="jupiter"></div>
        <div id="saturno"></div>
        <div id="urano"></div>
        <div id="netuno"></div>
      </div>

In the CSS:

#mercurio {
    position:absolute;
    top: 50px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    
    background-color:rgb(190, 39, 39);

    animation-name: mercurio;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite; 
}
    
#sol{
    position: relative;
    top:250px;
    background-color: yellow;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
    text-decoration-color: white;
}
@keyframes mercurio{
    from{
        left:0px;
    }
    to{
        left: 100px;
    }
}

I’ll explain how the position: absolute. The position: absolute, causes the tag with this attribute to be "stuck" inside the first tag positon: relative that she’s in. So in his way he did the following: the Mercury tag is the closest daughter of which Relative tag with position? the body? then he checks and sees that no, the body is position: static,then he sees the HTML tag, and sees if it’s position relative then he sees that it’s also not, so since there’s no tag above, he gets "stuck" within the beginning of the site, if you give top:0px he would go to the top of the site.

So when you zoom in or zoom out, change the size of everything, also of the pixels, then the way it was, the sun would increase the size/decrease, and the pixels of it, and the difference between the top of the page and the sun would also change, making the Circle tag move.

In my issue I put the div of the Media (and other planets) inside the div "Sun", so when putting top:0px He goes at the beginning of the sun div. then when zoom in, it will continue X pixel of the div SOL and not X pixels of the top page.

It’s a little complicated to explain, but I hope you understand :)

Browser other questions tagged css3 css-animations

You are not signed in. Login or sign up in order to post.