图片的动画样式

.img_div{
/* height: 40%;/
width: 30rem;
max-height: 50%;
/height:23.5rem; /
padding: 4%;
margin: 20% auto 0 auto;
cursor:pointer;
}
.img_div:hover{
/height: 40%;/
width: 30rem;
max-height: 50%;
/height:23.5rem; */
padding: 4%;
margin: 20% auto 0 auto;
cursor:pointer;
background: url(../static/img-bg.gif) no-repeat ;
background-size: 100% 100%;
animation: aniy 0.5s ease-in;
}
@keyframes aniy{
from{opacity: 0.2;}
to{opacity: 1;}
}

这里的效果，就是在img的hover状态后，以背景图的方式加上动图，并且加入了一段动画。css动画还可以用过渡，这里没有使用到过渡，使用了@keyframes元素编辑动画。