How to Apply CSS3 Transition to All Properties Except Background-Position

How do I apply CSS3 transition to all properties except background-position?

Here's a solution that also works on Firefox:

transition: all 0.3s ease, background-position 1ms;

I made a small demo: http://jsfiddle.net/aWzwh/

How to animate all except one feature with CSS

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.

How do I apply CSS3 filter grayscale to all properties except figcaption's tag?

You've nested the figcaption inside the black-white container which has the grayfilter on it. So this block (including the children) will always be grayscaled. Better would be adding the black-white class only to the elements which needs to be grayscaled. Hope this helps.

disable inherited transition (all) for only one css property

You just have to declare new property for transitions, and old inherited ones are gone.

So, i just used this>

a.notrans{
-webkit-transition:color .2s;
-moz-transition:color .2s;
-o-transition:color .2s;
-ms-transition:color .2s;
transition:color .2s;
}

After this, only color transition is working!

Maybe there is better solution ?

CSS transition property can't be used twice for a selector?

Declaring the same CSS property multiple times will result in previous declarations being overwritten, and only the last being kept. (Assuming they have identical specificity).

You can comma-separate transitions like so:

transition: all .5s ease-in-out, opacity 80ms linear, background .2s ease-out;

Demonstration:

* {    transition: all .5s ease-in-out, opacity 2s linear, background 4s ease-out;}
div {    padding: 100px;    background-color: red;    color: white;    opacity: 0.4;}
div:hover {    font-size: 20px;    opacity: 1;    background-color: blue;}

<div>hover this</div>

CSS3 Transitions: Is transition: all slower than transition: x ?

Yes, using transition: all could cause major drawbacks in performance. There can be a lot of cases where the browser would look if it needs to make a transition, even if user won't see it, like the color changes, dimension changes etc.

The simplest example I can think of is this: http://dabblet.com/gist/1657661 — try to change the zoom level or the font's size and you'll see that everything become animated.Of course there couldn't be a lot of such user interactions, but there could be some interface changes that can cause the reflow and repaints in some blocks, that could tell the browser to try and animate those changes.

So, in general, it's recommended that you won't use the transition: all and would use the direct transitions instead.

There are some other things that can go wrong with the all transitions, like the splash of animation on page load, where it would at first render the initial styles for blocks and then apply the style with an animation. In a lot of cases it wouldn't be the thing that you want :)