Transición CSS para un solo tipo de transformación?

¿Es posible animar (usando transiciones) solo un tipo de transformación css?

Tengo css: 

cell{
  transform: scale(2) translate(100px, 200px);
  transition: All 0.25s;  
}

Ahora, quiero que solo se anime la escala. En este caso podría usar position: absolute y left/right properties pero que yo recuerde, translate () es mucho mejor en rendimiento. También me gustaría evitar el uso de elementos html adicionales.

Violín: http://jsfiddle.net/6UE28/2/

Author: cimak, 2014-06-09
Source

4 answers

¡Sí! Lo separa en dos selectores, uno de ellos con transition: none, luego activa el reflujo CSS en el medio para aplicar el cambio (de lo contrario, se considerará como un cambio y hará la transición).

var el = document.getElementById('el');
el.addEventListener('click', function() {
  el.classList.add('enlarged');
  el.offsetHeight; /* CSS reflow */
  el.classList.add('moved');
});
#el { width: 20px; height: 20px; background-color: black; border-radius: 100%; }
#el.enlarged { transform: scale(2); transition: none; }
#el.moved { transform: scale(2) translate(100px); transition: transform 3s; }
<div id="el"></div>
 10
Author: user,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-09 22:59:59

¡No! no se puede usar transition solo para cierto valor de transform como scale(2).

Una posible solución sería la siguiente: (lo siento, tienes que usar html adicional)

HTML 

<div class="scale">
<div class="translate">
Hello World
</div>
</div>

CSS 

div.scale:hover {
    transform: scale(2);
    transition: transform 0.25s;
}
div.scale:hover div.translate {
    transform: translate(100px,200px);
}
 22
Author: Barun,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-06-09 13:05:09

Sí, por qué no. Para hacer eso, tienes que realmente usar solo una transformación.

Esto es lo que te confunde: no aplicas transform en el elemento en sí. Esto se aplica al estado de cambio (por medio de una pseudo clase como :hover u otra clase usando los estilos que desee en el estado cambiado). Por favor vea el comentario de @David sobre su pregunta. Cambia el estado solo para la propiedad que desea cambiar y que se animará.

Así que, efectivamente cámbielos selectivamente según el estado cambiado.

Solución 1: Usando Javascript (basado en el violín que proporcionó en su pregunta)

Demo: http://jsfiddle.net/abhitalks/6UE28/4/

CSS relevante : 

div{   
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
    /* do NOT specify transforms here */
}

jQuery relevante : 

$('...').click(function(){
    $("#trgt").css({
        "-webkit-transform": "scale(0.5)"
    });
});

// OR 

$('...').click(function(){
    $("#trgt").css({
        "-webkit-transform": "translate(100px, 100px)"
    });
});

// OR

$('...').click(function(){
    $("#trgt").css({
        "-webkit-transform": "scale(0.5) translate(100px, 100px)"
    });
});

Solución 2: Usando solo CSS

Demo 2: http://jsfiddle.net/abhitalks/4pPSw/1/

Pertinente CSS : 

div{   
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
    /* do NOT specify transforms here */
}

div:hover {
    -webkit-transform: scale(0.5);
}

/* OR */

div:hover {
    -webkit-transform: translate(100px, 100px);
}

/* OR */

div:hover {
    -webkit-transform: scale(0.5) translate(100px, 100px);
}
 2
Author: Abhitalks,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-06-09 13:16:21

En lugar de forzar un reflujo, puede usar setTimeout.

var el = document.getElementById('el');
el.addEventListener('click', function() {
  el.classList.add('enlarged');
  setTimeout(function() {el.classList.add('moved');})
});
#el { width: 20px; height: 20px; background-color: black; border-radius: 100%; }
#el.enlarged { transform: scale(2); transition: none; }
#el.moved { transform: scale(2) translate(100px); transition: transform 3s; }
<div id="el"></div>
 0
Author: Raphael Rafatpanah,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-12 13:49:21