Question

当我加载页面时，该框将具有无限的动画跳跃关键帧。现在我希望盒子在我悬停时增加它的比例，但我似乎无法解决它。当我添加＆＃34; hover＆＃34;代码只能工作一次。我添加了＆＃34;无限＆＃34;但它仍然不会工作。但是当我移除关键帧时，缩放将按照我想要的方式工作，但我希望将关键帧和缩放组合在一起。

https://jsfiddle.net/vucocsym/1/

＆＃13;

#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)
  }
}

＆＃13;

<div id="tag1">
  <h4>Hello there!</h4>
</div>

＆＃13;

Answer 1

属性transform允许将多个函数组合在一起，例如

transform: translateY(5px) scale(1.3);

但是，如果您只想在scale(1.3)上触发:hover，则需要在另一个元素上设置它，可以是内部元素或包装元素。

在以下示例中，有三个元素用于居中，缩放和反弹。

.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>

结合@keyframes和变换比例

1 个答案: