Change Child Animation/transition On Parent Hover

What I am trying to achieve: I am trying to change a child CSS animation when hovering the parent. It is, however, for some reason not working. Explanation: .front-ball has the hvr

Solution 1:

You can make another keyframes to handle the scale animation and on hover replace the hvr-wobble-vertical with your new keyframes

.wbutton:hover > .front-ball {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-animation-name: hve-scale;
  animation-name: hve-scale;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

@-webkit-keyframes hve-scale {
  0% {
    -webkit-transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.1);
  }
}

@keyframes hve-scale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

Demo: https://jsfiddle.net/yb1LrL5o/