¿Cómo aplico la transición CSS3 a todas las propiedades excepto a la posición de fondo?

108

Me gustaría aplicar una transición CSS a todas las propiedades, excepto a la posición de fondo. Traté de 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 intenté sobrescribir únicamente la transición para la propiedad de posición de fondo.

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

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

css css-transitions Cenar
fuente
1
Hola, estoy buscando este problema. ¿Recibiste alguna respuesta aceptable?
Milche Patern

Respuestas:

143

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/

Felix Edelmann
fuente
3
Por alguna razón 1msno funcionó para mí, pero lo 0hizo.
Flimm
@Flimm, ¿qué navegador estás usando? ¿Y qué quieres decir con "no funcionó", no animó nada?
Felix Edelmann
1
Para mí 1msno funcionó, ¡pero lo 1ms nonehizo! @ericsoco 0mso 0sfunciona también.
BCoder
3
Las unidades de tiempo DEBEN tener una unidad. Entonces 0 no funciona como 4 no funcionará, pero 4s funcionarán como 0s.
ESR
2
He buscado esto durante tanto tiempo, gracias, @FelixEdelmann !!
tatsu
17

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 CSS con una coma.

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

aldo.roman.nurena
fuente
6
Estoy probando esto en Chrome y no parece funcionar para mí. La allpropiedad de transición parece anular todas las demás, pase lo que pase.
animuson
2
Interesante. Supongo que no lo había probado con otras propiedades. Cuando lo probé color 0funcionó, pero ciertamente no funciona background-position 0. Even background 0no produce resultados para mí ... Aquí hay un jsFiddle que preparé desde el menú Gaming.SE. Para ser honesto, solo probé background-positioninicialmente porque eso es lo que la pregunta menciona específicamente y es lo que estaba tratando de cambiar yo mismo.
animuson
2
Solía ​​funcionar en Chrome para mí. Todavía funciona en IE11, pero a partir de esta semana, todas las propiedades ahora anulan cualquier cosa posterior en la línea.
cirrus
1
Como dijo @cirrus, Chrome ya no respeta una duración de 0 segundos, pero puede hacer que funcione con una duración muy corta, como.1ms
GetFree
1
Esto funciona tanto en Chrome como en Firefox si se proporciona una duración de segundos distinta de cero.
Naisheel Verdhan
4

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;
}
Siva
fuente
Las respuestas de sólo código "pruebe esto" no son las mejores. Mejor es una explicación de lo que estás haciendo.
random_user_name
2

Puede intentar usar la forma estándar de W3C:

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

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

lucianmarin
fuente
2

Para cualquiera que busque una forma abreviada de agregar transición para todas las propiedades, excepto una propiedad específica con retraso , tenga en cuenta que existen diferencias incluso entre los navegadores modernos.

Una simple demostración a continuación muestra la diferencia. Ver código completo

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

Chrome "combinará" las dos animaciones (que es como esperaba), como a continuación:

ingrese la descripción de la imagen aquí

Si bien Safari lo "separa" (lo que puede no ser de esperar):

ingrese la descripción de la imagen aquí

Una forma más compatible es que asigne la transición específica para una propiedad específica, si tiene un retraso para una de ellas.

iplus26
fuente
En efecto. Ésta es una percepción crítica. Por poco convincente que sea tener que especificar cada propiedad individualmente en lugar de hacerlo all, es útil saber que es la única forma de obtener el comportamiento deseado en todos los navegadores.
random_user_name
1

Tratar:

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

Esto funcionó para mí en algo similar ...

StuR
fuente
fijar background-position a 0 no es = eliminar la transición de background-position. ¿No es así?
Milche Patern
1
Esto nunca puede funcionar. Al volver a definir la propiedad de transición posteriormente, anula completamente la propiedad de transición anterior, como si nunca hubiera existido. No se consolidan.
animuson