title: Iron Man HUD CSS Animation
body: <p>I've always been inspired by the HUD display in Iron Man. Specifically how the icons fly in at the initial loading of the suit like here:</p>
  
  <p><a href="https://www.youtube.com/watch?feature=player_embedded&amp;v=ZwOxM0-byvc" rel="nofollow">https://www.youtube.com/watch?feature=player_embedded&amp;v=ZwOxM0-byvc</a></p>
  
  <p>However, I haven't found a way in CSS get the images to start at the center of the page, drop to the bottom and then slide into their respective spots. I figured that I would have to use something like this:</p>
  
  <pre><code>from {
      opacity: .5;
      position: absolute;
      left: 50%;
      transform:  translate3d(0, -100px, 0);
      animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  
  60% {
      opacity: 1;
      position: absolute;
      left: 50%;
      transform: translate3d(0, 0, 0);
  
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
  
  to{
      left: 0%
  
  }
  </code></pre>
  
  <p>However, when I do that it creates a weird jitter as it doesn't appear to know how to make the transition smoothly from left center (50% absolute) to then it's respective placement on the page.</p>
  
  <p>Ideas?</p>