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。您可以通过添加margin: 0;将其删除：

body { 
    margin: 0; 
} 

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