Как применить переход CSS3 ко всем свойствам, кроме background-position?

Я хотел бы применить переход CSS ко всем свойствам, кроме background-position. Я пытался сделать это так:

.csstransitions a {
    -webkit-transition: all 0.3s ease;                  
    -moz-transition: all 0.3s ease;                 
    -o-transition: all 0.3s ease;   
    -ms-transition: all 0.3s ease;          
    transition: all 0.3s ease;
}

.csstransitions a {
    -webkit-transition: background-position 0s ease 0s;                 
    -moz-transition: background-position 0s ease 0s;                
    -o-transition: background-position 0s ease 0s;  
    -ms-transition: background-position 0s ease 0s;         
    transition: background-position 0s ease 0s;
}

Сначала я установил для всех свойств переход, а затем попытался перезаписать только переход для свойства background-position.

Однако это, похоже, также сбрасывает все другие свойства - так что в основном никаких переходов больше не происходит.

Есть ли способ сделать это, не перечисляя все свойства?

Вот решение, которое также работает в Firefox:

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

Я сделал небольшую демонстрацию: http://jsfiddle.net/aWzwh/

Надеюсь не опоздать. Это осуществляется одной линией!

-webkit-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-moz-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-o-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0; 

Это работает в Chrome. Вы должны разделить свойства CSS запятой.

Вот рабочий пример: http://jsfiddle.net/H2jet/

Попробуй это...

* {
    transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
}
a {
    -webkit-transition: background-position 1ms linear;
    -moz-transition: background-position 1ms linear;
    -o-transition: background-position 1ms linear;
    transition: background-position 1ms linear;
}

Вы можете попробовать использовать стандартный способ W3C:

.transition { transition: all 0.2s, top 0s, left 0s, width 0s, height 0s; }

http://jsfiddle.net/H2jet/60/

Если кто-то ищет сокращенный способ добавить переход для всех свойств, кроме одного конкретного свойства с задержкой , имейте в виду , что есть различия даже между современными браузерами.

Простая демонстрация ниже показывает разницу. Посмотреть полный код

div:hover {
  width: 500px;
  height: 500px;
  border-radius: 0;
  transition: all 2s, border-radius 2s 4s;
}

Chrome "объединит" две анимации (как я и ожидал), как показано ниже:

В то время как Safari «разделяет» это (чего нельзя ожидать):

Более совместимый способ - назначить конкретный переход для определенного свойства, если у вас есть задержка для одного из них.

Пытаться:

-webkit-transition: all .2s linear, background-position 0;

Это сработало для меня с чем-то похожим ..