css实现图片从左到右滑入并淡入的特效

html代码

<div class="slidepro-container>
	<img src="static/images/pic2-1.png" alt="">
	<div class="slidepro-show">
		<img src="static/images/pic2-2.png" alt="">
	</div>
</div>

css代码

.slidepro-container{
    position:relative;
}
.slidepro-container .slidepro-show{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:0;
    height:100%;
    overflow: hidden;
}
.slidepro-container .slidepro-show img{
    width:auto;
    height:100%;
}
.slidepro-container:hover .slidepro-show{
    animation: loading .3s linear forwards;
    -webkit-animation:loading .3s linear forwards;
    -moz-animation:loading .3s linear forwards;
    -o-animation:loading .3s linear forwards;
    -ms-animation:loading .3s linear forwards;
}
@keyframes loading {
    0% {left:0;width:0; opacity:0}
   100% {left: 0;width:100%;opacity:1}
}

实现原理

附注