title: Change child animation/transition on parent hover
body: <p><strong>What I am trying to achieve:</strong><br>
  I am trying to change a child CSS animation when hovering the parent. It is, however, for some reason not working.</p>
  
  <p><strong>Explanation:</strong><br>
  <em>.front-ball</em> has the <em>hvr-wobble-vertical</em> applied to it from the start. I then want the animation to change to <em>.front-ball</em> scale animation when hovering it's parent element, <em>.wbutton</em>. </p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;a class="wbutton img-responsive center-block" role="button"&gt;
    &lt;img class="front-logo" src="img/logos/logowork_03.png" /&gt;
    &lt;img class="front-ball" src="img/logos/logowork_09.png" /&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.wbutton:hover &gt; .front-ball {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  
  .front-ball {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-animation-name: hvr-wobble-vertical;
    animation-name: hvr-wobble-vertical;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }
  
  @-webkit-keyframes hvr-wobble-vertical {
    16.65% {
      -webkit-transform: translateY(8px);
      transform: translateY(8px);
    }
    33.3% {
      -webkit-transform: translateY(-6px);
      transform: translateY(-6px);
    }
    49.95% {
      -webkit-transform: translateY(4px);
      transform: translateY(4px);
    }
    66.6% {
      -webkit-transform: translateY(-2px);
      transform: translateY(-2px);
    }
    83.25% {
      -webkit-transform: translateY(1px);
      transform: translateY(1px);
    }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }
  
  @keyframes hvr-wobble-vertical {
    16.65% {
      -webkit-transform: translateY(8px);
      transform: translateY(8px);
    }
    33.3% {
      -webkit-transform: translateY(-6px);
      transform: translateY(-6px);
    }
    49.95% {
      -webkit-transform: translateY(4px);
      transform: translateY(4px);
    }
    66.6% {
      -webkit-transform: translateY(-2px);
      transform: translateY(-2px);
    }
    83.25% {
      -webkit-transform: translateY(1px);
      transform: translateY(1px);
    }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }
  </code></pre>
  
  <p>It is obvious that I am trying to use 2 animations/transitions at a time, but I do not know what the correct way to reach my desired effect is.</p>