title: CSS Animations - change a property without a transition?
body: <p>I have a case where I need an element to appear for a second and then disappear, and I must not use javascript for it, so I'm trying to make it work with CSS.</p>
  
  <p>Here's an example:</p>
  
  <pre><code>@-webkit-keyframes slide-one-pager {
      0% { left: 0; }
      50% { left: 100px; }
      100% { left: 0; }
  }
  </code></pre>
  
  <p>So in this example the property will gradually transition from 0 to 100 and back to 0. However, I need to get rid of that transition, so the property stays at 0 and gets to 100 as soon as it hits 50%. It doesn't work if I say left: 0; at 49%, because there is still a transition.</p>
  
  <p>Another example, slightly more different than my original question, but if I find a solution for it it will do as well:</p>
  
  <pre><code>@-webkit-keyframes slide-one-pager {
      0% { display: none; }
      50% { display: block; }
          75% { display: block; }
      100% { display: none; }
  }
  </code></pre>
  
  <p>Here I want to show an element for a period of time. No, using opacity is not an option, because the element is still there and is still clickable, and I need access to elements below. Unfortunately the "display" property doesn't seem to accept animating. If anyone can think of a solution how to show and hide an element with an animation (without transition!) I will be extremely grateful.</p>
  
  <p>Any ideas?</p>