transiciones transicion texto para imagenes ejemplos efectos efecto botones avanzadas animaciones css3 transform transition

css3 - texto - transiciones css ejemplos



Transición de CSS para un solo tipo de transformación (4)

¿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 la escala sea animada. En este caso podría usar position: absolute y left / right properties pero por lo que recuerdo, translate () es mucho mejor en rendimiento. También me gustaría evitar el uso de elementos html adicionales.

Fiddle: http://jsfiddle.net/6UE28/2/


¡Sí! Lo separa en dos selectores, uno de ellos con transition: none , luego desencadena el reflujo de CSS entre ellos 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>


En lugar de forzar un reflow , 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>


Si por qué no. Para hacer eso, debes usar solo una transformación.

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

Entonces, efectivamente los cambias selectivamente en función del estado cambiado.

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

Demostración : 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 : solo uso de CSS

Demostración 2 : http://jsfiddle.net/abhitalks/4pPSw/1/

CSS relevante :

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


¡No! no 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); }