在照片进入的时候加了改变角度改变尺寸的动画效果，这样在鼠标经过图片的时候，图片就不会改变角度和尺寸
问题是，我在照片进入的时候加了改变角度改变尺寸的动画效果，这样在鼠标经过图片的时候，图片就不会改变角度和尺寸，这是为什么？代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> </title>
<style type="text/css">
*{margin: 0;padding: 0;}
.box{width:800px;margin: 0 auto;position: relative;}
.img{padding: 5px;border:1px solid #ddd;background: #fff;display: inline-block;top:30px;position: absolute;
cursor: pointer;;
box-shadow: 5px 5px 5px rgba(135, 139, 144, 0.4);
-webkit-box-shadow: 5px 5px 5px rgba(135, 139, 144, 0.4);
-webkit-transition:all 0.5s ease-in; /*过渡效果 ease-in缓慢开始 */
}
.img1{
transform: rotate(30deg) scale(0.5);
-webkit-transform: rotate(30deg) scale(0.5);
left: 20px;opacity: 0;
-webkit-animation:img1 2s forwards;
}
.img2{
transform: rotate(-30deg) scale(1);
-webkit-transform: rotate(-30deg) scale(0.8);
left:380px;
top:20px;
opacity: 0;
-webkit-animation:img2 3s 2s forwards;
}
@-webkit-keyframes img1 /* Safari and Chrome */
{
0% {left: -90%;top:-30%;opacity: 0;}
20%{left: -30%;top:-30%;opacity: 0;}
100%{left: 20px;top:0;opacity: 1;}
}
@-webkit-keyframes img2 /* Safari and Chrome */
{
0% {opacity: 0; -webkit-transform: rotate(0deg) scale(0.8);}
1%{opacity: 0.2; -webkit-transform: rotate(0deg) scale(0.8);}
80%{opacity: 1; -webkit-transform: rotate(-15deg) scale(1.2);}
100%{opacity: 1; -webkit-transform: rotate(-30deg) scale(0.8);}
}
.img:hover{
box-shadow: 15px 15px 15px rgba(135, 139, 144, 0.4);
-webkit-box-shadow: 15px 15px 15px rgba(135, 139, 144, 0.4);
transform: rotate(0deg) scale(1.5) ;
-webkit-transform: rotate(0deg) scale(1.5);
z-index: 100;
}
</style>
</head>
<body>
<div>
<div class="img img1">
<img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/>
</div>
<div class="img img2">
<img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/>
</div>
</div>
</body>
</html>
