Animation sans jquery, faites glisser à gauche et à droite

Je suis en train d'essayer de glisser une div à gauche quand je le montrer et de le faire glisser vers la droite quand je le cacher, mais je ne veux pas utiliser jQuery. Est-il un moyen de faire simple, d'animation et de soutien IE7 et IE8 sans l'aide d'une bibliothèque javascript?

Voici mon afficher/masquer js:

function showHide() {
 var Elliot = document.getElementById('Daniel').style.display;

 if (Elliot == "block") {
  document.getElementById('Daniel').style.display = "none"; 
 } else {
  document.getElementById('Daniel').style.display = "block";
 };
};

HTML ressemblerait à:

<a href="#" onclick="showHide();return false;">click me</a>

<div id="Daniel" style="display:block; width: 300px; height: 50px;">
<!-- some stuff -->
</div>
Je voudrais utiliser les transitions CSS et gracieusement dégrader à un afficher/masquer pour les navigateurs qui ne supportent pas.
intéressant les noms de variable y
J'utilise des noms de variables comme ceci pour le rendre évident qu'ils sont des variables 🙂

OriginalL'auteur user2219915 | 2013-08-30