hover后transition失效解决方案

在对一个div进行hover偏移后想加上transition效果，却发现失败了。通过在segmentfault上看到李文雄的回答后找到了解决方法。

因为div元素默认是没有相对定位的，只有hover的时候才变成了相对定位。所以应该在默认的时候就设置div元素为相对定位，在hover的时候改变它的bottom值。

div.intro .pic{
    transition: all linear .3s;
    margin-top:20px;
}

div.intro .pic:hover{
  

position: relative;

bottom: 2 px;}

修改后：

div.intro .pic{
    transition: all linear .3s;
    margin-top:20px;
    position: relative;
    bottom: 0px;
}

div.intro .pic:hover{

    bottom: 2px;
}