title: Is there a way to group browser-specific css3 animations?
body: <p>I want to make a CSS3 animation where a div gets a box shadow on mouse over, and loses it on mouse out. This is what I have so far:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="page"&gt;
      &lt;div id="container" onmouseover="mouseOverContainer()" onmouseout="mouseOutContainer()" class=""&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var container = undefined;
  function assignContainer() {
      if(container===undefined) {
          container = document.getElementById("container");
      }
  }
  function mouseOverContainer() {
      assignContainer();
      container.className="container-in";
  }
  function mouseOutContainer() {
      assignContainer();
      container.className="container-out";
  }
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@keyframes box-shadow-anim-in{
      from {
          box-shadow: 0 0 0 rgba(0,0,0,0.0);
          background-color: #ccc;
          margin-top: 20px;
          margin-top: 20px;
      }
      to {
          box-shadow: 0 0 250px rgba(127,127,127,1.0);
          background-color: #efefef;
          margin-top: 18px;
          margin-top: 18px;
      }
  }
  @-o-keyframes box-shadow-anim-in{
      from {
          -o-box-shadow: 0 0 0 rgba(0,0,0,0.0);
          background-color: #ccc;
          margin-top: 20px;
      }
      to {
          -o-box-shadow: 0 0 250px rgba(127,127,127,1.0);
          background-color: #efefef;
          margin-top: 18px;
      }
  } 
  @-webkit-keyframes box-shadow-anim-in{
      from {
          -webkit-box-shadow: 0 0 0 rgba(0,0,0,0.0);
          background-color: #ccc;
          margin-top: 20px;
      }
      to {
          -webkit-box-shadow: 0 0 250px rgba(127,127,127,1.0);
          background-color: #efefef;
          margin-top: 18px;
      }
  } 
  @-ms-keyframes box-shadow-anim-in{
      from {
          -ms-box-shadow: 0 0 0 rgba(0,0,0,0.0);
          background-color: #ccc;
          margin-top: 20px;
      }
      to {
          -ms-box-shadow: 0 0 250px rgba(127,127,127,1.0);
          background-color: #efefef;
          margin-top: 18px;
      }
  } 
  @-moz-keyframes box-shadow-anim-in  {
      from {
          -moz-box-shadow: 0 0 0 rgba(0,0,0,0.0);
          background-color: #ccc;
          margin-top: 20px;
      }
      to {
          -moz-box-shadow: 0 0 250px rgba(127,127,127,1.0);
          background-color: #efefef;
          margin-top: 18px;
      }
  }
  
  @keyframes box-shadow-anim-out{
      from {
          box-shadow: 0 0 250px rgba(127,127,127,1.0);
          background-color: #efefef;
          margin-top: 18px;
      }
      to {
          box-shadow: 0 0 0 rgba(0,0,0,0.0);
          background-color: #ccc;
          margin-top: 20px;
      }
  }
  @-moz-keyframes box-shadow-anim-out{
      from {
          -moz-box-shadow: 0 0 250px rgba(127,127,127,1.0);
          background-color: #efefef;
          margin-top: 18px;
      }
      to {
          -moz-box-shadow: 0 0 0 rgba(0,0,0,0.0);
          background-color: #ccc;
          margin-top: 20px;
      }
  } 
  @-o-keyframes box-shadow-anim-out{
      from {
          -o-box-shadow: 0 0 250px rgba(127,127,127,1.0);
          background-color: #efefef;
          margin-top: 18px;
      }
      to {
          -o-box-shadow: 0 0 0 rgba(0,0,0,0.0);
          background-color: #ccc;
          margin-top: 20px;
      }
  }
  @-webkit-keyframes box-shadow-anim-out {
      from {
          -webkit-box-shadow: 0 0 250px rgba(127,127,127,1.0);
          background-color: #efefef;
          margin-top: 18px;
      }
      to {
          -webkit-box-shadow: 0 0 0 rgba(0,0,0,0.0);
          background-color: #ccc;
          margin-top: 20px;
      }
  }
  @-ms-keyframes box-shadow-anim-out{
      from {
          -ms-box-shadow: 0 0 250px rgba(127,127,127,1.0);
          background-color: #efefef;
          margin-top: 18px;
      }
      to {
          -ms-box-shadow: 0 0 0 rgba(0,0,0,0.0);
          background-color: #ccc;
          margin-top: 20px;
      }
  } 
  
  #page {
      width: 900px;
      margin: 0 auto;
  }
  
  #container {
      width: 60%;
      height: 250px;
      background-color: #ccc;
      margin-top: 20px;
      border: 1px solid #999;
  }
  .container-out {
      animation: box-shadow-anim-out 0.3s;
      -moz-animation: box-shadow-anim-out 0.3s;
      -webkit-animation: box-shadow-anim-out 0.3s;
      -o-animation: box-shadow-anim-out 0.3s;
      -ms-animation: box-shadow-anim-out 0.3s;
  
      animation-fill-mode: forwards;
      -moz-animation-fill-mode: forwards;
      -o-animation-fill-mode: forwards;
      -ms-animation-fill-mode: forwards;
      -webkit-animation-fill-mode: forwards;
  }
  
  .container-in {
      animation: box-shadow-anim-in 0.3s;
      -moz-animation: box-shadow-anim-in 0.3s;
      -webkit-animation: box-shadow-anim-in 0.3s;
      -o-animation: box-shadow-anim-in 0.3s;
      -ms-animation: box-shadow-anim-in 0.3s;
  
      animation-fill-mode: forwards;
      -moz-animation-fill-mode: forwards;
      -o-animation-fill-mode: forwards;
      -ms-animation-fill-mode: forwards;
      -webkit-animation-fill-mode: forwards;
  }
  </code></pre>
  
  <p>Everything works fine, as you can see in <a href="http://jsfiddle.net/NzFSA/" rel="nofollow">this JSFiddle</a>.</p>
  
  <p>But, as you can see, we have to define browser-specific <code>keyframes</code> in order to make it work on all browsers.</p>
  
  <p>It's a bit boring, especially when you have to change one small detail in one animation, because you have to change all other browser-specific animations too.</p>
  
  <p>I thought I could use just one block, inserting all keyframes separated by comma, like this:</p>
  
  <pre><code>@keyframes box-shadow-anim-in,
  @-o-keyframes box-shadow-anim-in,
  @-webkit-keyframes box-shadow-anim-in,
  @-ms-keyframes box-shadow-anim-in,
  @-moz-keyframes box-shadow-anim-in  {
      from {
          box-shadow: 0 0 0 rgba(0,0,0,0.0);
          -o-box-shadow: 0 0 0 rgba(0,0,0,0.0);
          -webkit-box-shadow: 0 0 0 rgba(0,0,0,0.0);
          -ms-box-shadow: 0 0 0 rgba(0,0,0,0.0);
          -moz-box-shadow: 0 0 0 rgba(0,0,0,0.0);
          background-color: #ccc;
          margin-top: 20px;
      }
      to {
          box-shadow: 0 0 250px rgba(127,127,127,1.0);
          -o-box-shadow: 0 0 250px rgba(127,127,127,1.0);
          -webkit-box-shadow: 0 0 250px rgba(127,127,127,1.0);
          -ms-box-shadow: 0 0 250px rgba(127,127,127,1.0);
          -moz-box-shadow: 0 0 250px rgba(127,127,127,1.0);
          background-color: #efefef;
          margin-top: 18px;
      }
  }
  
  @keyframes box-shadow-anim-out,
  @-o-keyframes box-shadow-anim-out,
  @-webkit-keyframes box-shadow-anim-out,
  @-ms-keyframes box-shadow-anim-out,
  @-moz-keyframes box-shadow-anim-out {
      from {
          box-shadow: 0 0 250px rgba(127,127,127,1.0);
          -o-box-shadow: 0 0 250px rgba(127,127,127,1.0);
          -webkit-box-shadow: 0 0 250px rgba(127,127,127,1.0);
          -ms-box-shadow: 0 0 250px rgba(127,127,127,1.0);
          -moz-box-shadow: 0 0 250px rgba(127,127,127,1.0);
          background-color: #efefef;
          margin-top: 18px;
      }
      to {
          box-shadow: 0 0 0 rgba(0,0,0,0.0);
          -o-box-shadow: 0 0 0 rgba(0,0,0,0.0);
          -webkit-box-shadow: 0 0 0 rgba(0,0,0,0.0);
          -ms-box-shadow: 0 0 0 rgba(0,0,0,0.0);
          -moz-box-shadow: 0 0 0 rgba(0,0,0,0.0);
          background-color: #ccc;
          margin-top: 20px;
      }
  }
  </code></pre>
  
  <p>But this doesn't seem to work (<a href="http://jsfiddle.net/3c9a3/" rel="nofollow">JSFiddle here</a>), so maybe I'm doing something wrong or I just can't do it like this.</p>
  
  <p>Is it possible to do something like this? If yes, how?</p>