触发过渡动画 CSS

Question

一直在尝试使用 CSS 在运行动画中使用 :hover 触发转换，在下面的示例中，只有 background-color 在 [=13= 上发生变化] 但 transform 属性仅在动画停止后触发。如何在动画期间触发 transform: rotate？

此外，当我重新加载页面时，我的初始 background-color: red 似乎会淡入，而无需 :hover 明确触发它。我假设它是由 transition-duration 引起的，仅使用 CSS 可以避免这种情况吗？

.container {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.red {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: animation;
  animation-duration: 5s;
  animation-delay: 0;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  transition-duration: 5s;
  transition-property: all;
}

.red:hover {
  transform: rotate(180deg);
  background-color: teal;
}

@keyframes animation {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.5);
  }

  100% {
    transform: scale(1);
  }
}

<body>
  <div class="container">
    <div class="red"></div>
  </div>
</body>

Answer 1

变换不会以这种方式堆叠。解决此限制的一种方法是使用父元素进行旋转变换。

.container {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.red {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: animation;
  animation-duration: 5s;
  animation-delay: 0;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  transition-duration: 5s;
  transition-property: all;
}

.red:hover {
  background-color: teal;
}

.wrap {
  transition: all 5s;
}

.wrap:hover {
  transform: rotate(180deg);
}

@keyframes animation {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.5);
  }

  100% {
    transform: scale(1);
  }
}

<body>
  <div class="container">
    <div class="wrap">
      <div class="red"></div>
    </div>
    
  </div>
</body>

触发过渡动画 CSS

Triggering a transition mid-animation CSS

html

css

css-transitions

css-animations