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

【问题标题】：Transition stops to work when I add @keyframes当我添加 @keyframes 时，过渡停止工作
【发布时间】：2021-07-08 05:57:15
【问题描述】：

当我添加@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);
  }
}

【问题讨论】：

标签： css animation transform transition

【解决方案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>

【讨论】：