CSS关键帧被忽略/未被考虑在内

Question

我在CSS中使用这个动画作为mixin（在LESS中）。 所以动画是有效的，因为很明显，它考虑了第一部分，而不是@keyframes的东西。如果我删除@keyframes，它不会改变动画的任何内容。 但问题是我需要应用@keyframes参数，因为否则，在Chrome中它是模糊的并且有一个修复（-webkit-filter（0））但似乎它不起作用，因为不考虑关键帧。

.VANISHIN {


 -webkit-animation-name: vanishIn;
  animation-name: vanishIn;

    animation-duration: 0.5s;   
    -webkit-animation-duration: 0.5s;

    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes vanishIn {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(2, 2);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
  }
}
@keyframes vanishIn {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    -webkit-filter: blur(0px);
  }

  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    -webkit-filter: blur(0px);
  }
}