Langsames einblenden in HTML und CSS

Ich experimentiere aktuell ein wenig mit dem look and feel von Webpages.
Ein Punkt den ich dabei immer weggelassen habe, war ein langsames ein und ausblenden.

Das wollte ich ändern und habe mich ein wenig mit keyframes beschäftigt.
Damit lassen sich mit from und to in CSS Eigenschaften definieren, die über eine Zeitspanne verändert werden.

Hier ein Beispiel:

<input type="button" onclick="reload();" id="reload" value="stop"/>
<div id="testfield">
  <p class="absatz">
    Slow animation
  </p>
</div>
<style>
p.absatz {
  animation: slowmotion 1.5s;
  opacity:1; 
  margin-left:10em;  
}

@keyframes slowmotion {
    from { opacity:0; margin-left:0em;}
    to { opacity:1; margin-left:10em; }
}
</style>
<script type="text/javascript">
function reload()
{
  var testfield = document.getElementById("testfield");
  var reload = document.getElementById("reload");
  if(reload.value != "reload")
  {
    reload.value = "reload";
    testfield.style.display_old= testfield.style.display;
    testfield.style.display = "none";
  }
  else
  {
    reload.value = "stop";
    testfield.style.display = testfield.style.display_old;
  }
}
</script>