CSS Keyframe无法正常工作

Question

我正在使用animate.css中的代码来使用关键帧动画。他们不工作，我不知道为什么。我知道代码正在执行，并且正在添加类。我不明白为什么css不适用。

#popup {
position: fixed;
left: 50%;
top: 50%;
height: 50%;
width: 50%;
background-color: #bcbcbc;
display: none;
z-index: 9;
transform: translateX(-50%) translateY(-50%);
border-radius: 10px;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
  }



@-webkit-keyframes zoomIn {
    from {
      opacity: 0 !important;
      display: block;
      -webkit-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3);
    }

    50% {
      opacity: 1 !important;
    }
  }

  @keyframes zoomIn {
    from {
      opacity: 0 !important;
      display: block;
      -webkit-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3);
    }

    50% {
      opacity: 1 !important;
    }
  }

  .zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
  }

  @-webkit-keyframes zoomOut {
    from {
      opacity: 1 !important;
    }

    50% {
      opacity: 0 !important;
      -webkit-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3);
    }

    to {
      display: none;
      opacity: 0 !important;
    }
  }

  @keyframes zoomOut {
    from {
      opacity: 1 !important;
    }

    50% {
      opacity: 0 !important;
      -webkit-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3);
    }

    to {
      display: none;
      opacity: 0 !important;
    }
  }

  .zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut;
  }


    var popup =document.getElementById('popup');

   if (z == 0) {
                    z = 1;
                    zoom.to({
                      x: parseFloat(stateCoords[selectedState][0]),
                      y: parseFloat(stateCoords[selectedState][1]),
                      scale: 4
                    })
                      setTimeout(function(){
                        popup.className = 'zoomIn';
                      }, 1000);

                  } else {
                    popup.className = 'zoomOut';
                    zoom.out();
                    z = 0;
                  }