为什么这个过渡属性不适用于css?

时间:2017-03-13 01:33:46

标签: html css3 css-transitions

我有简单的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>

1 个答案:

答案 0 :(得分:0)

因为你没有过渡? (点击方框)

&#13;
&#13;
#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);
            }
            
&#13;
<div id="testItem"></div>
&#13;
{{1}}
&#13;
&#13;
&#13;