css3 - transition属性当鼠标一开的时候设置的时间不起作用

Question

#last-goods{
    background: url("../images/lasted-goods.jpg") no-repeat;
    width:100%;
    height:73px;
    overflow: hidden;
}
#last-goods:hover{
    -webkit-box-shadow:10px 10px 20px #b7b7b7;
    -box-shadow:10px 10px 20px #b7b7b7;
    transition: 1s all linear;
    -webkit-transition: 1s all linear;
    -webkit-transform: translate3d(0, -2px, 0);
    -moz-transform: translate3d(0, -2px, 0);
    -ms-transform: translate3d(0, -2px, 0);
    -o-transform: translate3d(0, -2px, 0);
    transform: translate3d(0, -2px, 0);
}

css属性如上，鼠标离开时，阴影瞬间消失怎么办

Answer 1

Write transition above, do not write it after pseudo-class

Answer 2

1. Transition is written on the element instead of the pseudo-class
2. There must be an initial value of transform on the element

Answer 3

These attributes can be executed by themselves without using pseudo-classes. For transition, you have to place it on the element to be transitioned