溢出-X：隐藏不适用于动画[重复]

Question

我正在开发一个使用 CSS3 包含动画元素的网站。我遇到的一个问题是垂直滚动条。所以有一个元素不断地左右滑动：

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

因此，对象大于屏幕尺寸。现在当然会出现垂直滚动条。我该如何隐藏它？

我将元素放在一个容器中，在那里我定义了overflow-x: hidden，但不知何故它不起作用。也许我只是做错了？我应该使用什么方法？

这是小提琴： https://jsfiddle.net/hsdoy3t4/

非常感谢您的帮助。

Answer 1

因为它采用body标签的默认边距。

为body标签设置margin:0。

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>