user2304993 user2304993 - 6 months ago 21
CSS Question

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-wobble-vertical applied to it from the start. I then want the animation to change to .front-ball scale animation when hovering it's parent element, .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);
}
}


Thanks:
I would greatly appreciate any help, tips or such on this matter. 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. Thanks very much in advance.

Answer

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/

Comments