css animation幻影动画，图片若隐若现

//html代码
        <img src="./img/ly.png" alt="" class=" shadowName">//底层动画
        <img src="./img/ly.png" alt="" class="">//顶层原图

//css代码--重点在底部
@-ms-keyframes name {
  from {}

  10% {
    filter: alpha(opacity=100);
    opacity: 1;
  }

  50% {
    filter: alpha(opacity=0);
    opacity: 0;
    transform: scale(1.6, 1.6);
  }

  to {
    filter: alpha(opacity=0);
    opacity: 0;
    transform: scale(1.6, 1.6);
  }
}

@-moz-keyframes name {
  from {}

  10% {
    filter: alpha(opacity=100);
    opacity: 1;
  }

  50% {
    filter: alpha(opacity=0);
    opacity: 0;
    transform: scale(1.6, 1.6);
  }

  to {
    filter: alpha(opacity=0);
    opacity: 0;
    transform: scale(1.6, 1.6);
  }
}

@-o-keyframes name {
  from {}

  10% {
    filter: alpha(opacity=100);
    opacity: 1;
  }

  50% {
    filter: alpha(opacity=0);
    opacity: 0;
    transform: scale(1.6, 1.6);
  }

  to {
    filter: alpha(opacity=0);
    opacity: 0;
    transform: scale(1.6, 1.6);
  }
}

@-webkit-keyframes name {
  from {}

  10% {
    filter: alpha(opacity=100);
    opacity: 1;
  }

  50% {
    filter: alpha(opacity=0);
    opacity: 0;
    transform: scale(1.6, 1.6);
  }

  to {
    filter: alpha(opacity=0);
    opacity: 0;
    transform: scale(1.6, 1.6);
  }
}

@keyframes name {
  from {}

  10% {
    filter: alpha(opacity=100);
    opacity: 1;
  }

  50% {
    filter: alpha(opacity=0);
    opacity: 0;
    transform: scale(1.6, 1.6);
  }

  to {
    filter: alpha(opacity=0);
    opacity: 0;
    transform: scale(1.6, 1.6);
  }
}

.shadowName{
  animation: 'name' 3.0s ease-in-out 0s infinite;
  -ms-animation: name 3.0s ease-in-out 0s infinite;
  -moz-animation: name 3.0s ease-in-out 0s infinite;
  -o-animation: 'name' 3.0s ease-in-out 0s infinite;
  -webkit-animation: 'name' 3.0s ease-in-out 0s infinite;
}