Overflow-X: hidden doesn't work with animation

Question

I'm working on a website with animated elements using CSS3. One problem I have is the vertical scrolling bar. So there's an element that is constantly sliding from left to right and back:

@keyframes waves {
  0% {left:-50px;}
  50% {left: 0px;}
  100% {left: -50px;}
}

So that this works, the object is bigger than the screen size. Now of course the vertical scrolling bar appears. How can I hide that?

I put the element in a container, where I defined overflow-x: hidden but somehow it didn't work. Maybe I just did a mistake? What method should I use?

Here's the fiddle: https://jsfiddle.net/hsdoy3t4/

Thank you very much for your help.

score 1 · Accepted Answer · answered Oct 14 '16 at 10:24

Because it's taking default margin of body tag.

Set margin:0 for body tag.

body{
  margin:0;
}
#home {
 width: 100vw;
 overflow-x: hidden;
}

#object {
 background-image: url('http://www.1000skies.com/800trim.jpg');
 width: calc(100% + 50px);
 height: 158px;
  position: relative;
 -webkit-animation: waves 2s infinite;
    -moz-animation: waves 2s infinite;
    animation: waves 2s infinite;
}

@-webkit-keyframes waves {
  0% {left:-50px;}
  50% {left: 0px;}
  100% {left: -50px;}
}

@-moz-keyframes waves {
  0% {left:-50px;}
  50% {left: 0px;}
  100% {left: -50px;}
}

@keyframes waves {
  0% {left:-50px;}
  50% {left: 0px;}
  100% {left: -50px;}
}

<section id="home">
  <div id="object"></div>
</section>

Overflow-X: hidden doesn't work with animation

1 Answers1