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