文字上的CSS3动画问题

Question

我正在建立一个网站，但文字幻灯片动画出现了一些问题。

这是小提琴

这是动画部分：

.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中。 您可以通过在.text添加width来更改此设置：

.text {
  width: 100%;
} 

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

body {
  margin: 0;
}

您可以查看正在运行的JS FIDDLE演示。 我添加了黑色背景来演示删除的边距。