过渡不起效果

注意:有时候过渡不起效果可能是定位的问题。

你给一个盒子加一个top:-5px,加了transtion不起效果可能是你没有给盒子初始的top:0;

.goos-inner {
    position: relative;
    float: left;
    text-align: center;
    margin-right: 8px;
    transition: all .4s;
}
.goos-inner:hover {
    top: -5px;
}

就像这里想利用定位加一个过渡的效果，可是忘记给初始的top值，导致过度失效了。

只需要在.goos-inner中加上   top:0   即可

这一点有时候很难被发现，所以加过渡时一定看一看有没有初始的值。