如何使用CSS動畫除一個功能之外的所有設備

我想給一個文本區域添加一個「全部」動畫，但是我不想讓它動起焦點上的文本陰影。

我怎樣才能讓當我使用的異常以下：

input[type=text]:focus { 
    background: #fff; 
    text-shadow: none; 
    transition:all 0.5s; 
    -webkit-transition:all 0.5s; 
    -moz-transition:all 0.5s; 
}

來源

2013-07-25 RadicalActi

爲什麼不直接離開'text-shadow'屬性？ –

因爲當人們點擊文本框時，所有的文本都會在文本框中被jQuery高亮顯示，並且看起來有點不好，帶有陰影的文本被突出顯示。 – RadicalActi

[如何將CSS3轉換應用於除background-position之外的所有屬性？]（https://stackoverflow.com/questions/10604389/how-do-i-apply-css3-transition-to-all-properties -except-background-position） –

這其實是非常簡單的，只需設置爲所有這些規則，然後再設置它只是文字陰影：

input[type=text]:focus { 
    background: #fff; 
    text-shadow: none; 
    transition:all 0.5s; 
    -webkit-transition:all 0.5s; 
    -moz-transition:all 0.5s; 
    transition:text-shadow 0s; 
    -webkit-transition:text-shadow 0s; 
    -moz-transition:text-shadow 0s; 
}

使用此代碼，如果更改文本陰影，它將立即更改，而不是生成動畫。像@帕特里克評論說，如果你不希望文本陰影改變，那麼確保你不要編輯該屬性。

來源

2013-07-25 20:41:49 Optox

謝謝你的工作很棒！爲你+1！ – RadicalActi

沒問題！那麼請選擇這個作爲正確的答案。：D – Optox

僅供參考這不會「修復」它..它只是用'文字陰影0'覆蓋了所有的0.5s，你不再有'全部'的轉換.. – Atticus

如何使用CSS動畫除一個功能之外的所有設備

回答

相關問題