css - 当我添加 @keyframes 时，过渡停止工作

Question

当我添加@keyframes 时，悬停时的缩放变换停止工作。两者分别工作正常，但以下代码只允许对象不断旋转。

.rotating {
  animation: rotation 40s infinite linear;
  transition: transform 1s;
}

.rotating:hover {
    transform: scale(1.05);
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

Answer 1

悬停和动画不能在一个对象上一起使用。但是你可以嵌套它。

.rotating {
  animation: rotation 40s infinite linear;
  transition: transform 1s;
  width: 100px;
  height: 100px;
}

.ontop {
  width: 100px;
  height: 100px;
  background-color: red;
}

.ontop:hover {
    transform: scale(1.05);
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

<div class="rotating">
     <div class="ontop">rot</div>
</div>