Como aplico a transição CSS3 a todas as propriedades, exceto a posição do plano de fundo?

108

Eu gostaria de aplicar uma transição CSS a todas as propriedades, exceto a posição de fundo. Tentei fazer assim:

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

Primeiro, defini todas as propriedades para transição e, em seguida, tentei sobrescrever apenas a transição para a propriedade background-position.

No entanto, isso também parece redefinir todas as outras propriedades - basicamente, nenhuma das transições parece acontecer mais.

Existe uma maneira de fazer isso sem listar todas as propriedades?

css css-transitions

— Jantar
fonte

1

Olá, na verdade estou procurando esse problema. Você obteve alguma resposta aceitável?

— Milche Patern

143

Esta é uma solução que também funciona no Firefox:

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

Fiz uma pequena demonstração: http://jsfiddle.net/aWzwh/

— Felix Edelmann
fonte

3

Por algum motivo 1msnão funcionou para mim, mas 0funcionou.

— Flimm 01 de

@Flimm, qual navegador você está usando? E o que você quer dizer com "não funcionou", não animou nada?

— Felix Edelmann

1

Para mim 1msnão funcionou, mas 1ms nonefuncionou! @ericsoco 0msou 0sfunciona também.

— BCoder

3

As unidades de tempo DEVEM ter uma unidade. Portanto, o 0 não funciona como o 4 não funciona, mas o 4s funcionará da mesma forma que os 0s.

— ESR

2

Eu procurei por isso por tanto tempo, obrigado, @FelixEdelmann !!

— tatsu de

17

Espero não se atrasar. Isso é feito usando apenas uma linha!

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

Isso funciona no Chrome. Você deve separar as propriedades CSS com uma vírgula.

Aqui está um exemplo prático : http://jsfiddle.net/H2jet/

— aldo.roman.nurena
fonte

6

Estou tentando fazer isso no Chrome e não parece funcionar para mim. A allpropriedade de transição parece substituir todas as outras, não importa o quê.

— animuson

2

Interessante. Acho que não o testei com outras propriedades. Quando tentei color 0, funcionou, mas certamente não está funcionando background-position 0. Nem background 0produz resultados para mim ... Aqui está um jsFiddle que criei no menu Gaming.SE. Para ser honesto, só testei background-positioninicialmente porque é isso que a pergunta menciona especificamente e é o que eu estava tentando mudar.

— animuson

2

Costumava funcionar no cromo para mim. Ele ainda está funcionando no IE11, mas a partir desta semana, a propriedade all agora substitui qualquer coisa posterior na linha.

— cirrus de

1

Como @cirrus disse, o Chrome não respeita mais a duração de 0 segundo, mas você pode fazer funcionar dando uma duração muito curta, como.1ms

— GetFree

1

Isso funciona no Chrome e no Firefox se uma duração diferente de zero segundo for fornecida.

— Naisheel Verdhan

4

Experimente isso ...

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

— Siva
fonte

Respostas apenas de código "tente isso" não são as melhores. Melhor é alguma explicação do que você está fazendo.

— random_user_name

2

Você pode tentar usar o método W3C padrão:

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

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

— lucianmarin
fonte

2

Para quem procura uma forma abreviada de adicionar transição para todas as propriedades, exceto para uma propriedade específica com atraso , esteja ciente de que há diferenças até mesmo entre os navegadores modernos.

Uma demonstração simples abaixo mostra a diferença. Verifique o código completo

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

O Chrome irá "combinar" as duas animações (como eu esperava), como abaixo:

Embora o Safari o "separe" (o que pode não ser esperado):

Uma forma mais compatível é atribuir a transição específica para uma propriedade específica, se houver um atraso para uma delas.

— iplus26
fonte

De fato. Este é um insight crítico. Por mais coxo que seja, é necessário especificar cada propriedade individualmente, em vez de all, é útil saber que é a única maneira de obter o comportamento desejado entre os navegadores.

— random_user_name

1

Experimentar:

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

Isso funcionou para mim em algo semelhante ..

— StuR
fonte

fixar a posição de fundo em 0 não é = remover a transição da posição de fundo. Não é?

— Milche Patern

1

Isso nunca pode funcionar. Ao redefinir a propriedade de transição posteriormente, você substitui completamente a propriedade de transição anterior, como se ela nunca tivesse existido. Eles não se consolidam.

— animuson