Matrix Scale Transition Not Working

matrix not equal to translate and rotate combination in css transform animation?

The issue is how the browser will handle interpolation. Both matrix are fine and they are the same as the transform defined but the interpolation between both is not the same.

Use forwards instead of infinite to see that both will start and end at the same state:

@keyframes gray {  0% { transform: matrix(1, 0, 0, 1, 0, 0) }  100% { transform: matrix(-1, 0, 0, -1, 20, 20) }}@keyframes lightblue {  0% { transform: translate(10px, 10px) rotate(0deg) translate(-10px, -10px); }  100% { transform: translate(10px, 10px) rotate(180deg) translate(-10px, -10px); }}.gray {  float: left;  margin-left: 50px;  width: 20px;  height: 20px;  background: gray;  transform-origin: 0px 0px;  animation: gray linear 2s 0.5s forwards;  border-right:2px solid;}.lightblue {  float: left;  margin-left: 50px;  width: 20px;  height: 20px;  background: lightblue;  transform-origin: 0px 0px;  animation: lightblue linear 2s 0.5s forwards;  border-right:2px solid;}

<div class="gray"></div>  <div class="lightblue"></div>

Why isn't my CSS transition working on the transform: matrix3d property?

I change your code little to this and it seems to working:

transition: all 1s linear;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;

http://jsfiddle.net/aFudH/2/

Nested css scale transform transitions don't cancel out each other

edit: went ahead and made an example codepen for the bezier curve.

http://codepen.io/anon/pen/jAYOBO <-- (old)

Now with curve for transition back to normal element state:

http://codepen.io/anon/pen/oLpLLG <-- (new)

The issue you're facing is with the relativity of these operations. You'll have to give different values for the transitions in play. You have the math logic right regarding the transforms, however, the transitions you have that are modifying these characteristics aren't adjusted to maintain the same animation with their own respectively different values- the transition values are the same.

What this means is that even though you have a perfect 2:1 scale between the two objects being transitioned, their rate of change is inherently different at different steps in the process- regardless of their destination/end result. You need to adjust the transition settings if you want them equalized in appearance.

Still Confused? In other words....

Let's assume that you have 2 div boxes in separate containers that don't affect each other. Here's some CSS to convey their relevant properties:

div.a{
width:100px;
height:100px;
}

div.b{
width:200px;
height:200px;
}

We could throw a transition on these that's exactly the same: linear, 10s, and doubling their respective sizes with scale(). (div.a would be 200px in height/width and div.b would be 400px in height/width)

Now, while it may seem unrelated to your circumstances and obvious that these 2 would not 'grow' at the same rate - (different starts, different destinations [that don't equally negate the initial start differences], with same duration) - this is the same issue that you're coming across.

To rectify the problem and get your animations to behave in the manner you're expecting, you'll have to modify the timing functions of your transition.

To demonstrate that the phenomenon that I'm describing is indeed actually happening, I've gone ahead and changed your transition type for one of the transforming elements to one that eases and forked it on the codepen link below. Play with it, and you'll get what I'm talking about. If you need more info, comment on my answer!

http://codepen.io/anon/pen/qNVgBB

Helpful Link: http://cubic-bezier.com/

Further Reading: Quadratic Bezier Curve: Calculate Point

(Also, I'm sure that the math stack exchange folks would love to chew this stuff up for you. I'm almost positive they can give you a much clearer breakdown of how the curves work.)
(Ugh, this is messy as heck now. I'll clean this up and reformat later)

animateTransform not working for transform scale

animateTransform normally replaces the current transform with the animated value, the additive attribute controls this.

If you set additive="sum" then the animation will be applied on top of the existing transform rather than replacing it.

CSS animation not working correctly on Firefox

It looks like there is a bug in Firefox. It seems it might be getting confused because you are using the same animation for the #techs group and its children.

The fix is to change the parent group animation to use an absolute transform-origin. I've used the coordinates of the centre of the background circle. It also has the advantage of making the rotation animation smoother.

#techs {
     animation: rotate 10s infinite linear;
     transform-origin: 252px 247px;
}
 #techs > * {
     animation: inherit;
     animation-direction: reverse;
     transform-origin: center;
     transform-box: fill-box;
}