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

109

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

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

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

css css-transitions Обедать
источник

1

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

Milche Patern

144

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

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

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

Феликс Эдельманн
источник

3

У 1msменя почему- то не сработало, но сработало 0.

Flimm 01

@Flimm, какой браузер вы используете? А что значит «не сработало», ничего не анимировал?

Феликс Эдельманн

1

Для меня 1msне сработало, но сработало 1ms none! @ericsoco 0msили 0sтоже работает.

BCoder

3

Единицы времени ДОЛЖНЫ иметь единицу. Таким образом, 0 не работает так же, как 4 не будет работать, но 4 будут работать так же, как 0 будут работать.

ESR

2

Я так долго искал это, спасибо, @FelixEdelmann !!

tatsu

17

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

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

aldo.roman.nurena
источник

6

Я пробую это в Chrome, и, похоже, у меня это не работает. Свойство allперехода, кажется, отменяет все остальные, несмотря ни на что.

animuson

2

Интересный. Думаю, я не тестировал его с другими свойствами. Когда я попробовал, color 0это сработало, но уж точно не работает background-position 0. У background 0меня даже нет результатов ... Вот jsFiddle, который я настроил из меню Gaming.SE. Честно говоря, я даже тестировал только background-positionсначала, потому что это то, что конкретно упоминается в вопросе, и это то, что я пытался изменить сам.

animuson

2

Раньше он работал у меня с хромом. Он по-прежнему работает в IE11, но на этой неделе свойство all переопределяет все, что будет позже.

cirrus

1

Как сказал @cirrus, Chrome больше не соблюдает нулевую продолжительность, но вы можете заставить его работать, давая вместо этого очень короткую продолжительность, например.1ms

GetFree

1

Это работает как в Chrome, так и в Firefox, если указана длительность, отличная от нуля.

Naisheel Verdhan 01

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

Шива
источник

"попробуйте это" ответы только на код не самые лучшие. Лучше какое-нибудь объяснение того, что вы делаете.

random_user_name

2

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

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

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

Люцианмарин
источник

2

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

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

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

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

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

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

iplus26
источник

На самом деле. Это критическое понимание. Как ни крути, нужно указывать каждое свойство индивидуально, а не allполезно знать, что это единственный способ получить желаемое поведение в браузерах.

random_user_name 03

1

Пытаться:

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

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

StuR
источник

установка background-position на 0 не = удаление перехода от background-position. Не так ли?

Milche Patern

1

Это никогда не сработает. Повторно определяя свойство перехода впоследствии, вы полностью переопределяете предыдущее свойство перехода, как если бы оно никогда не существовало. Они не консолидируются.

animuson

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

Ответы: