CSS 图片过渡和转换动画

话不多说先上案例：

原理：

在一个盒子中塞入两个与盒子一样大小的图片，并将超出部分隐藏

<!-布局-->
<div class="test">
			<div></div>
			<div></div>
		</div>

<!--设置盒子样式-->
.test{
   
				width: 200px;
				height: 200px;
				margin-top: 200px;
				margin-left: 300px;
				overflow: hidden;
			}
		
.test div{
   
				width: 100%