如何使用 CSS 為除一項功能之外的所有功能設置動畫

Question

我有一個簡單的問題。

我想為文本區域提供“全部”動畫，但是我不希望它為焦點上的文本陰影設置動畫。

當我使用以下內容時如何例外：

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

Answer 1

你也可以這樣寫，如果你不想覆蓋 transition 屬性：

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

Answer 2

這實際上非常簡單，只需為所有這些設置規則，然后為 text-shadow 再次設置：

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;
}

使用此代碼，如果您更改文本陰影，它將立即更改，而不是動畫。 就像@Patrick 評論的那樣，如果您根本不希望 text-shadow 發生變化，請確保不要編輯該屬性。