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

93

Я хотел бы применить 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.

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

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

Привет, я на самом деле ищу эту проблему. Вы получили приемлемый ответ? Milche Patern

Ваш Ответ

6   ответов
122

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

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

Error: User Rate Limit Exceeded1msError: User Rate Limit Exceeded1ms noneError: User Rate Limit Exceeded0msError: User Rate Limit Exceeded0sError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded1msError: User Rate Limit Exceeded0Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded0msError: User Rate Limit Exceeded
4

* {
    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;
}
1

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

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

1

Пытаться:

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

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

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
14

оки!

-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/

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit ExceededallError: User Rate Limit Exceeded
Error: User Rate Limit Exceededcolor 0Error: User Rate Limit Exceededbackground-position 0Error: User Rate Limit Exceededbackground 0Error: User Rate Limit ExceededHere's a jsFiddleError: User Rate Limit Exceededbackground-positionError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded.1ms
1

кто ищет сокращенный способ, чтобы добавить переход для всех свойствexcept for one specific property with delayбыть в курсеdifferences среди даже современных браузеров.

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

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

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

enter image description here

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

enter image description here

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

Похожие вопросы