css - 为什么我的 CSS 转换不起作用？

Question

我已经检查了这个简单的代码大约一百次，transform 属性工作得很好，但它只是卡在原地，就好像 transition 属性不起作用一样，我一直在掩盖什么小细节？这里有一个带有 transform 属性的 jsfiddle 被注释掉了。 https://jsfiddle.net/t8kbtjdy/30/

#testItem{
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg);
  transition: transform 1000ms ease-in-out 0ms;
}

Answer 1

您遇到的问题是您在页面上以转换状态加载元素，因此没有任何内容可以过渡到。

在下面的示例中，我使用悬停来更改旋转:

#testItem{
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 1000ms ease-in-out 0ms;
}
#testItem:hover{
  transform: rotate(45deg);
}

<div id="t2">
  <div id="testItem"></div>
</div>

但是，如果你想在页面加载时看到你的过渡而不是 :hover 你需要使用 css animation

@keyframes rotateIt {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(0);
  }
}

#testItem{
  width: 100px;
  height: 100px;
  background-color: red;
  animation: rotateIt 1s infinite;
}

<div id="t2">
  <div id="testItem"></div>
</div>