Preseve a state with CSS 3 transforms - css

Question

I would like to create an animation in two parts. I explain a bit.
I have a rectangle, at the beggining of the animation, the top will have an animation to be shrink. After this end of this animation, I would like to keep this state, use js to detect when the animation is finished and add my second animation the shrink the bottom of the rectangle. At the moment, there are the two animations, but don't keep in mind the previous state.
#-webkit-keyframes scale {
100% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: perspective(900px) rotateX(10deg);
}
}
#-moz-keyframes scale {
100% {
-moz-transform-origin: 50% 100%;
-moz-transform: perspective(900px) rotateX(10deg);
}
}
.scale {
-webkit-transform-origin: 50% 100%;
-webkit-transform: perspective(900px) rotateX(10deg);
-moz-transform-origin: 50% 100%;
-moz-transform: perspective(900px) rotateX(10deg);
}
#-webkit-keyframes toto {
100% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: perspective(900px) rotateX(-10deg);
}
}
#-moz-keyframes toto {
100% {
-moz-transform-origin: 50% 0%;
-moz-transform: perspective(900px) rotateX(-10deg);
}
}
.scale2 {
background: purple !important;
-webkit-animation: toto 1.4s ease forwards !important;
-moz-animation: toto 1.4s ease forwards !important;
}
A little jsfiddle with the code : http://jsfiddle.net/JeremDsgn/Dfyam/2/

Answer 1

I would recommend that you use a plugin such as jQuery Transit since it is ideal for preserving the state of your css3 transitions/transforms, especially if you are planning on doing a lot of animations. It is a lot easier than maintaining a big CSS file.
Example:
//Initial settings on Window DIV
$('#window').css( { 'transformOrigin': '50% 100%', perspective: '900', rotateX: 10 } );
$('#yoyo').on("click", function () {
$('#window').transition( { background: 'purple' }, 1400, 'in', function () {
//Do any additional animations here, such as change the background again
$('#window').delay(2000).transition( { background: 'blue' }, 3000, 'out');
});
});
JS Fiddle Demo

Answer 2

You can do one of two things:
Add a from or 0% to your second animation:
http://jsfiddle.net/trolleymusic/y2Hxc/
#-webkit-keyframes scale {
100% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: perspective(900px) rotateX(10deg);
}
}
#-webkit-keyframes toto {
from {
-webkit-transform-origin: 50% 100%;
-webkit-transform: perspective(900px) rotateX(10deg);
}
to {
-webkit-transform-origin: 50% 0%;
-webkit-transform: perspective(900px) rotateX(-10deg);
}
}
Or add the current transform properties to the element as inline styles using javascript before adding the second transition - I think this is what you were talking about wanting:
http://jsfiddle.net/trolleymusic/TbwfC/
// Listener
$('window').addEventListener('webkitAnimationEnd', function() {
this.style.webkitTransform = window.getComputedStyle(this)["-webkit-transform"];
this.style.webkitTransformOrigin = window.getComputedStyle(this)["-webkit-transform-origin"];
this.className = 'scale2';
}, false);
So you get the current transform matrix and origin from window.getComputedStyle, and apply it to the element before changing the class name.
I have removed the -moz- prefixed lines to keep the code shorter - as ROFLwTIME pointed out it can get long quickly. Obviously using the second solution you will have to watch how you implement it in other browsers as they will need to read their respective prefixes or the non prefixed versions of transform and transform-origin.
A quick plug for SASS
If you are concerned with the complexity and size of your CSS I would consider looking at SASS (http://sass-lang.com) and Compass (http://compass-style.org), especially for transforms and animation. Instead of writing:
-webkit-transform: rotateX(10deg);
-moz-transform: rotateX(10deg);
-ms-transform: rotateX(10deg);
-o-transform: rotateX(10deg);
transform: rotateX(10deg);
You write:
#include transform(rotateX(10deg));
And SASS will output all of those lines into your CSS. It makes writing animations, transforms and transitions much more manageable.