title: CSS3 Animation: Forwards fill not working with position and display on Safari
body: <p>So, I have created a CSS3 animation that is supposed to fade out an element by setting its opacity from 1 to 0 and at the last frames change the <code>position</code> to <code>absolute</code> and <code>display</code> to <code>none</code>. But on Safari it will only maintain the opacity, position and display are not set to the final values.</p>
  
  <pre><code>@-webkit-keyframes impressum-fade-out {
    0% {
      opacity: 1;
      display: block;
      position: relative;
    }
    99% {
      opacity: 0;
      position: relative;
    }
    100% {
      opacity: 0;
      display: none;
      position: absolute;
    }
  }
  </code></pre>
  
  <p>It seems to work on Chrome but not on Safari (I tried version 8). Apparently, position and display do not work properly with animation-fill-mode: forwards... </p>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/uhtL12gv/" rel="nofollow">http://jsfiddle.net/uhtL12gv/</a></p>
  
  <p><strong>EDIT For Bounty:</strong> I am aware of workarounds with Javascript and transitionend events. But I am wondering why Browsers lack support for this? Does the specification state that fillmode forwards doesnt apply to some attributes like position or is this a bug in the browsers? Because I couldnt find anything in the bug trackers.. If anybody has some insight, I would really appreciate it</p>