title: css transform and animation conflicting; order of html elements matters?
body: <p>So, I have a menu that is rounded on the ends, and delineated by diagonal spaces (accomplished with css transform skewx). I also have a element that is animated with css animation.</p>
  
  <p>The problem is this: if the animated element is placed before the menu in the DOM. the menu deforms until the animation is done. If I place the animated element after the menu in the DOM, it works fine.</p>
  
  <p>I want to keep the animated element at the top of the DOM. How can I resolve this with css?</p>
  
  <h2><a href="http://jsfiddle.net/3jh23q93/5/" rel="nofollow">JSFiddle</a></h2>
  
  <p>Markup:</p>
  
  <pre><code>&lt;div class="testanimation"&gt;&lt;/div&gt;
  
  &lt;div class="testmenu"&gt;
      &lt;ul&gt;
          &lt;li class="one"&gt;&lt;span&gt;&lt;p&gt;ONE&lt;/p&gt;&lt;/span&gt;&lt;/li&gt;
          &lt;li class="two"&gt;&lt;span&gt;&lt;p&gt;TWO&lt;/p&gt;&lt;/span&gt;&lt;/li&gt;
          &lt;li class="three"&gt;&lt;span&gt;&lt;p&gt;THREE&lt;/p&gt;&lt;/span&gt;&lt;/li&gt;
          &lt;li class="four"&gt;&lt;span&gt;&lt;p&gt;FOUR&lt;/p&gt;&lt;/span&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And heres' the css:</p>
  
  <pre><code>@-webkit-keyframes cart-modified{
      0% {
          -webkit-transform: scale(1);
      }
      35% {
          -webkit-transform: scale(1.5);
      }
      100% {
          -webkit-transform: scale(1);
      }
  }
  .testanimation{
      -webkit-animation: cart-modified 0.5s ease 2 0.25s;
      min-width: 1.25em;
      padding: 0.25em;
      position: absolute;
      top: 3px;
      background-color: #fa001f;
      background-color: rgba(250, 0, 31, 0.9);
  
  }
  
  .testmenu ul{
      display: flex;
      display: -webkit-box;
      border-radius: 50px;
      overflow: hidden;
      width: 95%;
  }
  .testmenu ul li{
      transform: skewX(-45deg);
      -webkit-transform: skewX(-45deg);
      margin: 0 5px 0 5px;
      background-color: #e8e8e8;
      width: 25%;
      text-align: center;
      list-style: none;
  }
  .testmenu span{
      transform: skewX(45deg);
      -webkit-transform: skewX(45deg);
      display: block;
      color: white;
  }
  .one{
      padding-left: 40px !important;
      margin-left: -60px !important;
  }
  .four{
      padding-right: 40px !important;
      margin-right: -30px !important;
  }
  </code></pre>
  
  <p>Thanks for your knowledge!</p>