Q:

CSS3 transition for transform not being used?

I've been working on this mobile-themed 'burger' menu for quite so time now, and I'm almost done - I just need to fix the transition for the transformation. I'd like it to be like the apple.com mobile menu where the two bars join then form an 'x'. I've believe I've got the transforms correct, but obviously, I don't.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="menu.js"></script>
<title>Icon Test</title>
<style>
* {
    margin: 0;
    padding: 0;
    border: 0;
}

.container {
    display: block;
    width: 48px;
    height: 48px;
    background: #999;
}

.line-top {
    position: absolute;
    top: 0;
    left: 0;
    fill: #FFF;
    transition: all 2s ease 3s;
    -moz-transition: all 2s ease 3s;
}

.line-top-active {
    transform: translateX(0px) rotate(45deg);
    -moz-transform: translateX(0px) rotate(45deg);
    transform-origin: center;
    -moz-transform-origin: center;
}

.line-bottom {
    position: absolute;
    top: 0;
    left: 0;
    fill: #FFF; 
}

.line-bottom-active {
    transition: all 2s ease 3s;
    -moz-transition: all 2s ease 3s;
    transform: translateX(0px) rotate(-45deg);
    -moz-transform: translateX(0px) rotate(-45deg);
    transform-origin: center;
    -moz-transform-origin: center;
}

.rect-top {
    transition: all 2s ease-in-out 0s;
    -moz-transition: all 2s ease-in-out 0s;
}

.rect-top-active {
    transform: translateY(8);
    -moz-transform: translateY(8);
    transform-origin: center;
    -moz-transform-origin: center;
}

.rect-bottom {
    transition: all 2s ease-in-out 0s;
    -moz-transition: all 2s ease-in-out 0s;
}

.rect-bottom-active {
    transform: translateY(-8);
    -moz-transform: translateY(-8);
    transform-origin: center;
    -moz-transform-origin: center;
}
</style>
</head>

<body>
<div class="container" id="button">
    <svg id="svg-top" class="line-top" x="0px" y="0px" width="48px" viewBox="0 0 96 96" enable-background="new 0 0 96 96">
        <rect id="rect-top" class="rect-top" width="32" height="4" x="32" y="38"></rect>
    </svg>
    <svg id="svg-bottom" class="line-bottom" x="0px" y="0px" width="48px" viewBox="0 0 96 96" enable-background="new 0 0 96 96">
        <rect id="rect-bottom" class="rect-bottom" width="32" height="4" x="32" y="54"></rect>
    </svg>
</div>
</body>
</html>

JS (Just in-case)
function init() {
    alert("Loaded");
    document.getElementById('button').onclick = function() {
        alert("Success");
        var topSvg = document.getElementById('svg-top');
        var bottomSvg = document.getElementById('svg-bottom');  
        var topLine = document.getElementById('rect-top');
        var bottomLine = document.getElementById('rect-bottom');

        topLine.setAttribute('class', 'rect-top-active'); 
        bottomLine.setAttribute('class', 'rect-bottom-active');
        topSvg.setAttribute('class', 'line-top-active');
        bottomSvg.setAttribute('class', 'line-bottom-active');  
    }
};

window.onload = init;

A:

No need for svg, we can just use:

:before and :after pseudo elements to create the two strokes

CSS animation to rotate into the X shape / rotate out of the X shape.

The transition to move the lines together into the middle and apart when the mouse leaves

The apple mobile site looks like this:

My recreation looks like this:

Full Example
The jQuery is used to add a class to trigger the closing animation once the mouse leaves for the first time. It can be replaced with vanilla Javascript fairly easily.
This example triggers on hover, this could easily be changed to on click with javascript.

$('a').mouseleave(function() {
  if (!$(this).hasClass('mouseOut')) {
    $(this).addClass('mouseOut');
  }
});
a {
  position: relative;
  display: block;
  height: 16px;
  width: 16px;
}
a:before,
a:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  height: 2px;
  width: 16px;
  background: #000;
  transition: all 0.3s 0.3s linear;
  top: 4px;
}
a:after {
  top: 10px;
}
a:hover:before,
a:hover:after {
  top: 7px;
  top: 7px;
  -webkit-animation: rotationBefore 0.3s 0.3s linear forwards;
  animation: rotationBefore 0.3s 0.3s linear forwards;
  transform: rotate(135deg);
  transition: all 0.3s linear;
}
a:hover:after {
  -webkit-animation: rotationAfter 0.3s 0.3s linear forwards;
  animation: rotationAfter 0.3s 0.3s linear forwards;
  transform: rotate(-135deg);
}

.mouseOut:before {
  -webkit-animation: rotationBeforeLeave 0.3s linear forwards;
  animation: rotationBeforeLeave 0.3s linear forwards;
}
.mouseOut:after {
  -webkit-animation: rotationAfterLeave 0.3s linear forwards;
  animation: rotationAfterLeave 0.3s linear forwards;
}
@-webkit-keyframes rotationBefore {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(135deg);
  }
}
@-webkit-keyframes rotationAfter {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-135deg);
  }
}
@-webkit-keyframes rotationBeforeLeave {
  0% {
    transform: rotate(135deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes rotationAfterLeave {
  0% {
    transform: rotate(-135deg);
  }
  100% {
    transform: rotate(0);
  }
}

@keyframes rotationBefore {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(135deg);
  }
}
@keyframes rotationAfter {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-135deg);
  }
}
@keyframes rotationBeforeLeave {
  0% {
    transform: rotate(135deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes rotationAfterLeave {
  0% {
    transform: rotate(-135deg);
  }
  100% {
    transform: rotate(0);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#"></a>

