Combining #keyframes and transform scale - html

Question

When I load the page the box will have infinite keyframes of animation jumpin. Now I want the box to increase its scale when I hover it, but I cant seem to work it out. When I add the "hover" code it will only work once. I added "infinite" but still it wont work. but when I removed the keyframe the scale will work just fine the way I want it to be, but I want to combine keyframe and scale together.
https://jsfiddle.net/vucocsym/1/
#tag1 {
position: absolute;
right: 50%;
bottom: 50%;
border-style: none;
background-color: #ff4d4d;
border-radius: 10px;
padding: 20px;
color: #f2f2f2;
animation: jumping 1s 1s ease infinite;
transition: 2s;
}
#tag1:hover {
transform: scale(1.3);
}
#keyframes jumping {
0% {
transform: translateY(0px)
}
50% {
transform: translateY(5px)
}
100% {
transform: translateY(0px)
}
}
<div id="tag1">
<h4>Hello there!</h4>
</div>

Answer 1

The property transform allows multiple functions set together, e.g.
transform: translateY(5px) scale(1.3);
However, if you want to trigger scale(1.3) only on :hover, then you need to set it on a different element, that can be either an inner or a wrapper element.
In the following example, there are three elements for center, scale and bounce.
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.scale {
transition: 1s;
}
.scale:hover {
transform: scale(1.3);
}
.bounce {
background-color: crimson;
color: white;
border-radius: 10px;
padding: 20px;
animation: jumping 1s 1s ease infinite;
}
#keyframes jumping {
0% {
transform: translateY(0);
}
50% {
transform: translateY(5px);
}
100% {
transform: translateY(0);
}
}
<div class="center">
<div class="scale">
<div class="bounce">Hello there, hover me!</div>
</div>
</div>