Overflow-X: hidden doesn't work with animation [duplicate] - html

Question

This question already has answers here:
How to remove margin space around body or clear default css styles
(7 answers)
Closed 6 years ago.
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.

Answer 1

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>