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演示。我添加了一个黑色背景来演示删除的边距。