为什么我的 css 过渡不起作用

Question

我已经看了这个简单的代码大约一百次，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>

Answer 2

我认为你应该用s而不是ms。

Transition: all 1s ;

当然，您可以根据需要对其进行修剪。