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 ;

你可以根据自己的需要修剪它。

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

2 个答案: