css3動畫文本問題

我正在建立一個網站，我得到了一些文字幻燈片動畫的問題。css3動畫文本問題

這裏是動畫部件：

.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的左邊有餘量，我無法刪除它。我怎樣才能使橫幅瀏覽器的整個寬度？

這是我第一次在這裏發帖，所以如果我做錯了什麼，你能告訴我請:)

來源

2016-07-01 Kalyr

你可以請更新小提琴..它顯示空白輸出.. –

你有.text {margin-left：20px; margin-right：20px;}在你的Css中。刪除它們，如果你不想要保證金。 – Gaetan

空白小提琴？ –

當你的DIV .text沒有width分配，他試圖以滿足您的DIV中的文本。您可以通過添加一個width您.text更改此：

.text { 
    width: 100%; 
}

其次，要避免被你的身體標籤的瀏覽器標準引起了margin。您可以通過添加margin: 0;將其刪除：

body { 
    margin: 0; 
}

您可以檢查你的工作JS FIDDLE演示。我已添加黑色背景來演示刪除的邊距。

來源

2016-07-01 11:27:25

謝謝！它現在工作，我已經把寬度設置爲95％，所以文本不會一直走到屏幕的一側。 – Kalyr

@Kalyr這很好聽。如果答案對您有幫助，請將其標記爲正確，以指導以下用戶訪問此網站。如果不是，請提供您自己的答案。 –

css3動畫文本問題

回答

相關問題