なぜこの移行プロパティはCSSで動作しませんか？

私はcssの少量で簡単なhtmlドキュメントを持っています。トランスフォームは動作しますが、トランジションは動作しません私は数多くのものを試してみましたが、私が見ているチュートリアルの正確なコピーのように見えますが、何か間違った構文がありますか？なぜこの移行プロパティはCSSで動作しませんか？

<!DOCTYPE html> 
<html> 
    <head> 
     <title>transition Learning</title> 
     <meta charset="utf-8"> 
     <style> 
      #testItem{ 
       background-color: blue; 
       width: 80px; 
       height: 80px; 
       margin: 300px auto; 
       transition: transform 600ms ease-in-out; 
       transform: translate(200px,200px) rotate(45deg); 
      } 


     </style> 
    </head> 
    <body> 
     <div id="testItem"></div> 
    </body> 
</html>

出典

2017-03-13 Samatha

何も変わっていないので、

document.getElementById("testItem").onclick = function() { 
 
    this.classList.toggle('transition'); 
 
}

#testItem.transition { 
 
    transform: rotate(90deg); 
 
} 
 

 
#testItem{ 
 
       background-color: blue; 
 
       width: 80px; 
 
       height: 80px; 
 
       margin: 300px auto; 
 
       transition: transform 2s ease-in-out; 
 
       transform: translate(0,0) rotate(45deg); 
 
      }

<div id="testItem"></div>

（ボックスをクリック）

出典

2017-03-13 05:25:27

なぜこの移行プロパティはCSSで動作しませんか？

答えて

関連する問題