UPDATED and CLARIFIED
I need to execute some jquery that does an immediate rotate (using css3 transform) on an icon. And then once the icon is rotated I want to animate and scale to 200% of the size. However, since scale and rotate are both one CSS3 property (transform) I am seeing that both of the transitions are occurring as an animation for 0.5s. (in the JQUERY code I also update the location (top, left), but since that is not in the transition: tag, it happens immediately as required).
What I want is the rotate to happen immediately, and the scale to happen over 2s. Any ideas?
CSS:
transition: transform 0.5s;
-webkit-transition: -webkit-transform 0.5s;
JQUERY:
self.pick = function (cmd) {
var pt = Tools.cmdToPoint(cmd);
$(self.bbox).css("position", "fixed");
$(self.bbox).css("top", pt.y - 32);
$(self.bbox).css("left", pt.x - 32);
$(self.bbox).css("opacity", "1");
var theta = self.angle(cmd);
$(self.bbox).css("transform", "rotate(" + theta + "deg) scale(2.0)");
$(self.bbox).css("-webkit-transform", "rotate(" + theta + "deg) scale(2.0)");
}
What happens is that since transition on the item, both the scale and the rotate occur in an animation over 0.5s.
UPDATED and CLARIFIED
I need to execute some jquery that does an immediate rotate (using css3 transform) on an icon. And then once the icon is rotated I want to animate and scale to 200% of the size. However, since scale and rotate are both one CSS3 property (transform) I am seeing that both of the transitions are occurring as an animation for 0.5s. (in the JQUERY code I also update the location (top, left), but since that is not in the transition: tag, it happens immediately as required).
What I want is the rotate to happen immediately, and the scale to happen over 2s. Any ideas?
CSS:
transition: transform 0.5s;
-webkit-transition: -webkit-transform 0.5s;
JQUERY:
self.pick = function (cmd) {
var pt = Tools.cmdToPoint(cmd);
$(self.bbox).css("position", "fixed");
$(self.bbox).css("top", pt.y - 32);
$(self.bbox).css("left", pt.x - 32);
$(self.bbox).css("opacity", "1");
var theta = self.angle(cmd);
$(self.bbox).css("transform", "rotate(" + theta + "deg) scale(2.0)");
$(self.bbox).css("-webkit-transform", "rotate(" + theta + "deg) scale(2.0)");
}
What happens is that since transition on the item, both the scale and the rotate occur in an animation over 0.5s.
Share Improve this question edited Sep 20, 2014 at 0:00 BenMorel 36.6k51 gold badges205 silver badges335 bronze badges asked Jun 12, 2014 at 21:17 Dr.YSGDr.YSG 7,59123 gold badges89 silver badges151 bronze badges 5- What happens if instead of manipulating the element's css you make a rotation class and add that to the element before you add the large class? – bbird Commented Jun 12, 2014 at 21:53
- I can't really go that way for a solution. What I am doing is in javascript dynamically puting the rotation of this <div> Icon based on where the mouse is pressed. So there is no fixed rotation. I pute rotation, and then I want the element to both rotate and grow. – Dr.YSG Commented Jun 13, 2014 at 13:37
- 1 Can you create a fiddle for the problem? – TheNorthWes Commented Jun 16, 2014 at 18:19
- 1 Not really sure, but can you split this into two transformations? rotate and scale, and then also grow it. This way you would rotate 100%, and then scale 25%, and then after that pletes, scale the final 75%? – TheNorthWes Commented Jun 16, 2014 at 18:32
- @AdmiralAdama That would only work as long as the timing function is linear. For more plex timing functions (say, you wanna ease-out the rotate, but ease-in the scale) it bees impossible. – thykka Commented Jun 16, 2014 at 19:09
2 Answers
Reset to default 9 +50You really have 2 options, but I think nested div's will most likely be your best option. You can use jQuery to control the timing of certain animations, but it will require a decent amount of coding to get it right.
Per Andrea Ligios ment, you should set a delay on the two class so that the transition starts after 0.5s
HTML
<div id="rotate" class="half rotate">
<div id="scale" class="two grow">Rotate</div>
</div>
CSS
.half {
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
.two {
transition: all 2s ease-in-out 0.5s;
-webkit-transition: all 2s ease-in-out 0.5s;
}
#rotate, #scale {
height: 150px;
width: 100px;
text-align: center;
margin: 0 auto;
}
#scale {
border: 1px blue solid; /*for visualization*/
}
.rotate:hover {
transform: rotateZ(180deg);
-webkit-transform: rotateZ(180deg);
}
.grow:hover {
transform: scale(2.0);
-webkit-transform: scale(2.0);
}
Here is a CSS demo fiddle : http://jsfiddle/adjit/w4kgP/5/
Your jQuery option involves setting timeouts, the only thing is the reverse animation doesn't go exactly in the reverse order. It will shrink and un-rotate with an interval of .5s. You can ofcourse also set a timeout for mouseout
jQuery Option
$('#rotate-scale').hover(function(){
clearTimeout(timeout);
$this = $(this);
$this.addClass('rotate');
timeout = setTimeout(function(){
$this.css("-webkit-transition", "all 2s ease-in-out");
$this.addClass('grow');
}, 500);
}, function(){
clearTimeout(timeout);
$(this).css("-webkit-transition", "all 0.5s ease-in-out");
$(this).removeClass('rotate');
$(this).removeClass('grow');
});
Here is a jQuery demo fiddle : http://jsfiddle/adjit/tR7EY/1/
Short answer: Use GSAP.
Long answer: CSS3 transform properties cannot really be individually animated, unless you happen to be good with transformation matrixes and are ready to write a lot of supporting code for a better animation system. Not only would you have to deal with converting the transform properties into transforms matrices, but you'd also need some sort of system to dynamically mix different matrix states to be actually able to decouple timings. This requires a lot of advanced mathematics and development time, which would most likely be better spent elsewhere.
EDIT: Further reading: How to read individual transform values in js
EDIT2: Depending on what exactly you're trying to do, you might be able to separate the animations by splitting them across several nested divs. Eg. The outermost div handles the scale animation and within it is a div with a rotation animation. CSSdeck example