@-webkit-keyframes fadeIn {
    0% {
        opacity:1;
     }
    25% {
        opacity:0;
    }
    50% {
        opacity: 0;    
    }
    75% {
        opacity:1;
    }
}
.a1,.a2{
  position:absolute;
}
.a1{
  z-index:2 
}
.a1:hover{-webkit-animation-name: fadeIn; /*动画名称*/
/*-webkit-animation-duration: 3s; 动画持续时间*/
-webkit-animation-iteration-count: 1; /*动画次数*/
-webkit-animation-delay: 0.5s; /*延迟时间*/}

.b{
  width:100px;
  height:100px;
  margin-top:300px;
   background:url(https://image.zhangxinxu.com/image/study/p/s200/ps6.jpg); 
  border:1px #f00 solid;
}
.b:hover{
 animation: yin 0.5s ease-out infinite; 
  -webkit-animation-iteration-count: 1; /*动画次数*/
-webkit-animation-delay: 0.5s; /*延迟时间*/
} 

@-webkit-keyframes yin{
  0%{
  background:url(https://image.zhangxinxu.com/image/study/p/s200/ps6.jpg); 
    
  }
  25% {
        background:url(https://image.zhangxinxu.com/image/study/p/s200/ps6.jpg);  
    
    }
    50% {
        background:url(https://image.zhangxinxu.com/image/study/p/s200/ps4.jpg) ; 
      
    }
    75% {
        background:url(https://image.zhangxinxu.com/image/study/p/s200/ps4.jpg);  
   
    }
   100%{
     background:url(https://image.zhangxinxu.com/image/study/p/s200/ps6.jpg);  
   }
}
 .c{
  width:100px;
  height:100px;
  margin-top:20px;
  background:url(https://image.zhangxinxu.com/image/study/p/s200/ps6.jpg) no-repeat ; 
   background-size:100% 100%;
    transition:5s;
       cursor: pointer;
}
 .c:hover{
    width:100px;
  height:100px;
    background:url(https://image.zhangxinxu.com/image/study/p/s200/ps4.jpg) no-repeat; 
   background-size:100% 100%;
   transition:5s;
 }