CSS 3 animation über javascript triggern, Problem mit Firefox

[Jan-Ole Hübner]

Hallo, ich habe folgendes Problem: Ich möchte eine Seite mit 2 Türflügeln und auf Knopfdruck sollen diese sich zur Seite schieben. Dazu löse ich bisher die css3 animation mit JS aus. Das sieht aus wie folgt:

JS Funktion:
 ~~~javascript function start() {
    var t1 = document.getElementById('t1');
  var t2 = document.getElementById('t2');
  var k = document.getElementById('k');
  var zeit ="10s";
  // animation starten

t1.style.MozAnimationName = "tuer1";
  t1.style.MozAnimationDuration = zeit;
  t1.style.MozAnimationIterationCount = "1";
  t1.style.MozAnimationTimingFunction = "linear";
  t1.style.MozAnimationFillMode = "forwards";
  t2.style.MozAnimationName = "tuer2";
  t2.style.MozAnimationDuration = zeit;
  t2.style.MozAnimationIterationCount = "1";
  t2.style.MozAnimationTimingFunction = "linear";
  t2.style.MozAnimationFillMode = "forwards";
  k.style.MozAnimationName = "knopf";
  k.style.MozAnimationDuration = zeit;
  k.style.MozAnimationIterationCount = "1";
  k.style.MozAnimationTimingFunction = "linear";

t1.style.webkitAnimationName = "tuer1";
  t1.style.webkitAnimationDuration = zeit;
  t1.style.webkitAnimationIterationCount = "1";
  t1.style.webkitAnimationTimingFunction = "linear";
  t1.style.webkitAnimationFillMode = "forwards";
  t2.style.webkitAnimationName = "tuer2";
  t2.style.webkitAnimationDuration = zeit;
  t2.style.webkitAnimationIterationCount = "1";
  t2.style.webkitAnimationTimingFunction = "linear";
  t2.style.webkitAnimationFillMode = "forwards";
  k.style.webkitAnimationName = "knopf";
  k.style.webkitAnimationDuration = zeit;
  k.style.webkitAnimationIterationCount = "1";
  k.style.webkitAnimationTimingFunction = "linear";

}

(K = Knopf t1/t2= Türflügel 1/2)  
für webkit läuft das ganze, aber firefox tut nichts... dabei müsste t1.style.MozAnimationName doch das selbe tun wie t1.style.webkitAnimationName nur eben mit "-moz"? Und für "-o" eigentlich doch ebenfalls?  
Die Keyframes sehen bei mir so aus:  
~~~css
@-webkit-keyframes 'tuer1' {  
   from       {width: 50%;}  
   to         {width: 0%; visibility:hidden; }  
}  
  
@-o-keyframes 'tuer1' {  
   from       {width: 50%;}  
   to         {width: 0%; visibility:hidden;}  
}  
@-moz-keyframes 'tuer1' {  
   from       {width: 50%;}  
   to         {width: 0%; visibility:hidden;}  
}  
@keyframes 'tuer1' {  
   from       {width: 50%;}  
   to         {width: 0%; visibility:hidden;}  
}  
  

Für tuer2 dann eben mit angepassten Werten aber genau so.
1. Hat jemand ne Idee wo der Fehler liegt?
2. Hat jemand Tipps / Verbesserungsvorschläge / Alternativen? Bin ziemlich neu bei css3
Danke :-)