加載頁面上的CSS3字母間距動畫

這是我第一次嘗試使用css3動畫。我正在嘗試創建一個字母間距動畫，其中字母首先緊密排列，然後字母間距增加。到目前爲止，我已經找到了一個允許間隔在懸停時發生的代碼。如何在頁面打開時移除懸停並製作動畫。加載頁面上的CSS3字母間距動畫

和代碼

p { 
    letter-spacing:-2px; 
    -webkit-transition: letter-spacing, 1s; 
    -moz-transition: letter-spacing, 1s; 
    -o-transition: letter-spacing, 1s; 
    transition: letter-spacing, 1s; 
} 
p:hover {letter-spacing:2px;}

來源

2014-09-02 nabeelaa

您可能需要通過這個來使用jQuery在頁面加載時添加該類，然後將該動畫應用於該類，從而使單個「p」元素不帶動畫。 – Lee 2014-09-02 10:20:27

有沒有辦法使用webkit關鍵幀來做到這一點？ – nabeelaa 2014-09-02 10:22:13

我站好了！ – Lee 2014-09-02 10:23:14

你可以用CSS3動畫jsfiddle完成它：

p { 
    letter-spacing:2px; 
    -webkit-animation: myanim 1s; 
    animation: myanim 1s; 
} 

@-webkit-keyframes myanim { 
    0% { letter-spacing: -2px; } 
    100% { letter-spacing:2px; } 
} 
@keyframes myanim { 
    0% { letter-spacing: -2px; } 
    100% { letter-spacing:2px; } 
}

你可以找到動畫文件here

來源

2014-09-02 10:22:24 AlexDom

完美！謝謝：D – nabeelaa 2014-09-02 16:41:29

不客氣=] – AlexDom 2014-09-02 16:46:12

我只是有一個更多的查詢。是否可以從中心動畫文字？現在它從左到右進行動畫處理。有沒有辦法讓它從中心傳播出去？再次感謝:) – nabeelaa 2014-09-02 20:50:47

加載頁面上的CSS3字母間距動畫

回答

相關問題