title: CSS3 animation: inherit property for keyframe at 0%
body: <p>I have following problem:
  I want to use CSS3 animation with keyframe rules (@keyframes myname {})</p>
  
  <p>Problem is, I want to use SINGLE at-rule keyframe animation for multiple elements, but these elements have different position each. So, @keyframes animation should inherit original properties of selector at 0% (or from {}) rule, so animation would originate at original position and size of selector.</p>
  
  <p>like this one:</p>
  
  <pre><code>@keyframes myanim {
    0% {
      left: inherit;
      top: inherit;
  width:inherit;
  height:inherit;
    }
  
    100% {
  top: 50%;
  left:50%;
      width: 100%;
      height: 60%;
    }
  }
  </code></pre>
  
  <p>And selector:</p>
  
  <pre><code>.myselector-one {
  top:10em;
  left:0em;
  width:10em;
  height:5em;
  animation: myanim 1s;
  }
  .myselector-two {
  top:20em;
  left:30em;
  width: 15em;
  height: 8em;
  animation: myanim 1s;
  }
  </code></pre>
  
  <p>Goal is to get original properties of each selector, put them to 0% keyframe as originating position and size and animate to 100% with same properties for every selector.</p>
  
  <p>Is this possible or I have to create animation for each selector? Problem is, that I wouldn't know their position as it's going to be dynamically calculated.</p>
  
  <p>Please, no jQuery solution, just pure CSS3 one! I DON't want to use jQuery animate method.</p>