title: Multiple CSS3 animations in one hover class
body: <p>I want the picture to have an animation, and i want the text to have an animation.</p>
  
  <p>This is what i got so far.</p>
  
  <p>The class:</p>
  
  <pre><code>.post-image:hover{  
          animation: picanim 1s; 
          -webkit-animation: picanim 1s;
          -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  } 
  </code></pre>
  
  <p>The animation:</p>
  
  <pre><code>@-webkit-keyframes picanim {
  0%{opacity: 1; -webkit-border-radius: 5px; -mo-border-radius: 5px; border-radius: 5px;}
  100%{opacity: 0.5; -webkit-border-radius: 20px; -mo-border-radius: 20px; border-radius: 20px;}
  }
  </code></pre>
  
  <p>Now i want another animation to be inside the .post-image:hover class but when i do it, none of the animations work.</p>
  
  <pre><code>.post-image:hover{
       /*foto animatie */
       animation: picanim 1s;
       -webkit-animation: picanim 1s; /* Safari and Chrome */
       -webkit-animation-fill-mode: forwards;
       animation-fill-mode: forwards;
       /*text animation*/
       animation: textAnim 1s;
       -webkit-animation: textAnim 1s; /* Safari and Chrome */
  } 
  </code></pre>
  
  <p>Anyone got a solution?</p>