Combining @keyframes and transform scale

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>

1 answer

  • answered 2018-02-13 01:39 Stickers

    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>