如何使用 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

这实际上很简单，只需为所有这些设置规则，然后为文本阴影再次设置它：

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 评论的那样，如果您根本不想更改文本阴影，请确保您不编辑该属性。

Answer 2

如果不想覆盖过渡属性，也可以这样写：

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