なぜ私のCSSの移行は機能していませんか？

Question

私はこの単純なコードを何百回も見てきましたが、トランスフォームプロパティはうまくいきましたが、トランジションプロパティが動作していないかのようにちょうどスナップしています。 ここでは、変換プロパティを持つ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

あなたの場合の問題は、ページに変換された状態で要素を読み込んでいるため、移行するものがないことです。あなたが代わりにあなたがcss animation

を使用する必要が :hoverのページのロードの移行を見たい場合は、しかし、

#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>

：例では

私は回転を変更するためにホバーを使用下回ります

@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

私はあなたの代わりにミリ秒で行くべきだと思います。

Transition: all 1s ; 

もちろん、必要に応じて調整することができます。