css加过渡不管用

大家好，今天给大家分享一下css加过渡不管用的问题。经过我自己的实践，发现如果不注意一些细节，轻易就会出现这种问题。

首先我们来看一下样式代码：

    .Box {
        width: 200px;
        height: 200px;
        background-color: red;
        transition: all 1s;
    }

    .Box:hover {
        width: 300px;
        height: 300px;
        background-color: green;
    }

上面的代码表示，当鼠标悬停在.Box元素上时，会使它的宽高从200px变成300px，颜色从红色变成绿色，过渡时间为1秒。

接下来我们来看看为什么有时候加上过渡却不见效果：

@H_502_16@1.浏览器兼容性问题：这里特别提醒一下，有些浏览器对过渡效果支持不好，比如IE浏览器，可能会导致过渡不生效。 @H_502_16@2.元素的初始状态问题：如果元素的display属性值为none，那么它的过渡效果就无法生效；如果元素的position属性值为static，那么它的过渡效果也会失效。 @H_502_16@3.属性值没有改变：当我们给一个元素加上过渡效果时，需要注意的是元素需要有从一个状态到另一个状态的变化，否则就会出现过渡不生效的问题。

好了，以上是我总结的css加过渡不管用的几个原因，希望对大家有所帮助。