CSS hover transform on animating element - html

Question

I'm trying to perform a simple CSS transform on :hover — which is obviously an easy task usually but I'm trying to do it on an animating div element. The element is infinitely animating on the Y axis with a simple CSS animation using #keyframes{}, but when I attempt to hover over the element nothing happens.
I can get it to kind of work if I use !important on the hover code, but the transform/scale happens instantly instead of using the 300ms transition property that I've applied to the .box class.
Am I missing something obvious, or is this not possible? Essentially I just want the element to scale on hover using the transition effect and timing, but then resume it's original animation when not hovered. Thanks
.box {
width: 50%;
border: solid 3px #555;
animation: box-move 1s infinite alternate-reverse;
transition: transform 300ms;
}
.box:hover {
transform: scale(1.2);
}
#keyframes box-move {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-5px);
}
}
<div class="box">I'm a box. I move up and down, but I don't scale nicely when hovered like I should :(</div>

Answer 1

Because you are using transform property on hover and in animation both.
Try this one.
.box {
width: 50%;
border: solid 3px #555;
animation: box-move 1s infinite alternate-reverse;
transition: transform 300ms;
}
.box:hover {
animation: box-move-anim 1s infinite alternate-reverse;
}
#keyframes box-move {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-5px);
}
}
#keyframes box-move-anim {
0% {
transform: translateY(0) scale(1);
}
100% {
transform: translateY(-5px) scale(1.2);
}
}

Answer 2

Consider another wrapper:
.box {
width: 50%;
animation: box-move 1s infinite alternate-reverse;
}
.box> div {
border: solid 3px #555;
transition: transform 300ms;
transform-origin:top left;
}
.box:hover > div {
transform: scale(1.2);
}
#keyframes box-move {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-5px);
}
}
<div class="box"><div>I'm a box. I move up and down, but I don't scale nicely when hovered like I should :(</div></div>

Answer 3

Ok, so thanks to your clever and helpful suggestions I managed to find a satisfactory solution. The key for me was using the animation-direction property set to forwards on the :hover. I can't really explain why this works but all I know that it doesn't work properly without it.
I would still ideally like the scale out (hover off) to be as smooth as the scale in (it currently just snaps back), but this will do for my needs.
Thanks again.
.box {
width: 50%;
margin: 1em auto 0 auto;
border: solid 3px #555;
cursor: pointer;
animation: box-move 1s infinite alternate-reverse;
}
.box:hover {
animation: box-move-anim 300ms 1 forwards;
}
#keyframes box-move {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-5px);
}
}
#keyframes box-move-anim {
0% {
transform: scale(1);
}
100% {
transform: scale(1.2);
}
}
<div class="box">I'm a box that animates up and down, but I now smoothly scale when hovered :)</div>