Ändern der untergeordneten Animation/des Übergangs beim übergeordneten Hover

Question

Was möchte ich erreichen: Ich versuche, eine untergeordnete CSS-Animation zu ändern, wenn ich den übergeordneten Zweig schwebe. Es funktioniert jedoch aus irgendeinem Grund nicht.

Erläuterung:
.front-Ball hat die HVR-Wobble-vertical von Anfang an darauf angewendet. Ich möchte dann, dass die Animation in ändert. Front-Ball Skalierung Animation, wenn Sie den Mauszeiger über das Element bewegen, .wbutton.

HTML:

<a class="wbutton img-responsive center-block" role="button"> 
    <img class="front-logo" src="img/logos/logowork_03.png" /> 
    <img class="front-ball" src="img/logos/logowork_09.png" /> 
</a> 

CSS:

.wbutton:hover > .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); 
    } 
} 

Danke: ich sehr jede mögliche Hilfe, Tipps oder solche in dieser Angelegenheit schätzen würde. Es ist offensichtlich, dass ich versuche, 2 Animationen/Übergänge gleichzeitig zu verwenden, aber ich weiß nicht, wie ich meinen gewünschten Effekt richtig erreichen kann. Vielen Dank im Voraus.

Answer 1

können Sie eine andere keyframes machen den scale animation zu handhaben und zu schweben ersetzen die hvr-wobble-vertical mit Ihrem neuen 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/