html - 文本上的 css3 动画问题

Question

我正在构建一个网站，但我遇到了一些有关文本幻灯片动画的问题。

here is the fiddle

这是动画部分:

.slide {


-webkit-animation-name: slide;
  -webkit-animation-duration: 1s;
  animation-name: slide;
  animation-duration: 1s;
}

@-webkit-keyframes slide{
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

@keyframes slide{
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

正如您所看到的，当文本滑入时，句子会自行收缩，看起来不太流畅。有人可以帮我吗？

蓝色横幅我也有一点问题:看起来它的左边有大约 10px 的边距，我无法将其删除。 我怎样才能让横幅占据浏览器的整个宽度？

这是我第一次在这里发帖所以如果我做错了什么请你告诉我:)

Answer 1

由于您的 div .text 没有指定 width，他会尝试将文本放入您的 div 中。您可以通过将 width 添加到您的 .text 来更改它:

.text {
  width: 100%;
} 

其次，您要避免的 margin 是由 body 标签的浏览器标准引起的。您可以通过添加 margin: 0; 来删除它:

body {
  margin: 0;
}

你可以检查你的工作JS FIDDLE演示。我添加了黑色背景来演示移除的边距。