话不多说，先简化代码，把兼容代码去掉，然后看代码里的注释

.change img{

  display:block;

  width:300px;

  height:284px;

  opacity:0;

  transform:translate(-100px,-100px);

  transition: opacity 1s ease-in-out 0.5s,transform 3s ease-in-out;

}

.change:hover img{

  transform:translate(0px,0px);

  opacity:1;

/*透明度1s时间完成转换(由0到1)，{两边的ease-in-ou不用说了吧}，transform:1s时间完成转换(xy值-100px到0px)  .1s就是我和你赛车我先让你抢跑0.1s在追上你的意思 */

  transition: opacity 1s ease-in-out,transform 1s ease-in-out .1s;

}