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评论的那样，如果你不想让text-shadow完全改变，那么请确保你不要编辑那个属性。

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

如何使用CSS动画除一个特征以外的所有特征

2 个答案: