ejemplos - ¿Cómo aplico la transición de CSS3 a todas las propiedades excepto background-position?

css background bottom

Question

Me gustaría aplicar una transición CSS a todas las propiedades, aparte de background-position. Intenté hacerlo de esta manera:

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

Primero configuré todas las propiedades para la transición y luego traté de sobrescribir únicamente la transición para la propiedad de posición de fondo.

Sin embargo, esto parece también restablecer todas las demás propiedades, por lo que, básicamente, ninguna de las transiciones parece ocurrir más.

¿Hay alguna manera de hacer esto sin enumerar todas las propiedades?

Answer 1

Aquí hay una solución que también funciona en Firefox:

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

Hice una pequeña demostración: http://jsfiddle.net/aWzwh/

Answer 2

Espero no llegar tarde. ¡Se logra usando solo una línea!

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

Eso funciona en Chrome. Tienes que separar las propiedades de CSS con una coma.

Aquí hay un ejemplo de trabajo: http://jsfiddle.net/H2jet/

Answer 3

Prueba esto...

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

Answer 4

Puede intentar usar la forma estándar W3C:

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

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

Answer 5

Tratar:

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

Esto funcionó para mí en algo similar ..