爲什麼我的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 ; 

您可以將它修剪到您的需要當然。