No replies
OliAction
OliAction's picture
Offline
newbie
Last seen: 1 week 6 days ago
Timezone: GMT+2
Joined: 2021-09-12
Posts: 2
Points: 4

Hi everyone,

I'm fairly new to CSS and I've encountered an issue I can't seem to solve on my own. I am trying to drift three divs ( 2 from left to right & 1 from right to left ) using the 'transform' function. Basically my end game is to create 3 "boxes" that drift in from the outside of the page and then stop at a certain point. The function works, but when I add the third div while it is sliding in from the right an expanding bottom scroll bar shows up.
Why am I getting that scroll-bar? If I inspect the page there is a margin border which shouldn't be there, but my body margin is set to 0. This also only happens when I add the third div. This confuses me. Would be great if you could check it out and let me know what's wrong here. I'm guessing the issue is with div3? Also, is this the correct way to do it or is there a "better" way in terms of the function used(transform). Thanks in advance.

Here is the code:

html:

<body>
    <div class="introbox-one"></div>
 
    <div class="introbox-two"></div>
 
    <div class="introbox-three"></div>
  </body>

css:

body {
  margin: 0;
}
 
 
.introbox-one {
  width: 70%;
  height: 15px;
  border: 1px solid blue;
  padding: 10px;
  background-color: blue;
  animation: introbox-one 1s ease-in;
}
 
@keyframes introbox-one {
  0% {
    transform: translateX(-100%);
  }
}
 
.introbox-two {
  margin-top: 20px;
  width: 60%;
  height: 15px;
  border: 1px solid blue;
  padding: 10px;
  background-color: blue;
  animation: introbox-two 1s ease-in;
}
 
@keyframes introbox-two {
  0% {
    transform: translateX(-100%);
  }
}
 
.introbox-three {
  margin-top: 20px;
  margin-left: 30%;
  width: 70%;
  height: 15px;
  border: 1px solid blue;
  padding: 10px;
  background-color: blue;
  animation: introbox-three 1s ease-in;
}
 
@keyframes introbox-three {
  0% {
    transform: translateX(100%);
  }
}