Search code examples
csscss-transitionstransition

How to animate all except one feature with CSS

I have a simple question.

I would like to give an "all" animation to a text area, however I do not want it to animate the text shadow on focus.

How can I make exceptions when I'm using the following:

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

  • This is actually pretty simple, just set the rule for all of them, then set it again for just the 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;
}

    With this code, if you change the text-shadow, it will instantly change, rather than animate. Like @Patrick commented, if you dont want the text-shadow to change at all, then make sure you don't edit that property.