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

Respostas:

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:

insira a descrição da imagem aqui

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

insira a descrição da imagem aqui

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