CSS盒子影子动画

Question

我正在尝试做一些我相信很简单的事情，但我的方式是错误的。我希望有一个图像上升一点，并显示一个盒子的阴影，就像它从悬停的页面上升起来一样。盒子阴影马上弹出，但我希望它与动画一起淡入。

[这是我到目前为止所。] [1]

[1]: https://jsfiddle.net/8u304Lm0/ 

<div id="float-container"> 
    <img src="http://lorempixel.com/400/400/" id="hvr-float" /> 
</div> 

#hvr-float { 
display: inline-block; 
vertical-align: middle; 

transition: box-shadow 5s; 

-webkit-transform: perspective(1px) translateZ(0); 
transform: perspective(1px) translateZ(0); 
-webkit-transition-duration: 0.5s; 
transition-duration: 0.5s; 
-webkit-transition-property: transform; 
transition-property: transform; 
-webkit-transition-timing-function: ease-out; 
transition-timing-function: ease-out; 
} 

#hvr-float:hover, #hvr-float:focus, #hvr-float:active { 
-webkit-transform: translateY(-8px); 
transform: translateY(-8px); 
box-shadow: 10px 10px 5px rgba(0,0,0,.4); 
} 

我感谢你在你的时间。

Answer 1

您将要覆盖与其他

#hvr-float { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    transition: box-shadow 1s, transform 1s; 
 
    transform: perspective(1px) translateZ(0); 
 
    box-shadow: 0px 0px 5px rgba(0, 0, 0, .4); 
 
} 
 

 
#hvr-float:hover, 
 
#hvr-float:focus, 
 
#hvr-float:active { 
 
    -webkit-transform: translateY(-8px); 
 
    transform: translateY(-8px); 
 
    box-shadow: 10px 10px 5px rgba(0, 0, 0, .4); 
 
}

<div id="float-container"> 
 
    <img src="http://lorempixel.com/400/400/" id="hvr-float" /> 
 
</div>