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

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

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