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

Question

我已经查看了这个简单的代码约百次，转换属性工作得很好，但它只是捕捉到的地方，如果过渡属性不工作，我不停地点亮什么微小的细节？ 这里jsfiddle的transform属性被注释掉了。 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>

但是，如果你想看到你的页面加载，而不是你需要使用css animation

:hover过渡

@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 ; 

您可以将它修剪到您的需要当然。