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

Question

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

.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

Hover 和 animation 不能在一个 object 上一起工作。 但是你可以嵌套它。

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