title: animation on a Center Div using CSS transform
body: <p>I center a div in a slide using css transform like this </p>
  
  <pre><code>.img .inpo {
     border-color: red;
      border-style: solid;
      border-width: 5px;
      padding:5px;
      width: auto;
  
      z-index:5;
     margin: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%); 
     -ms-transform: translate(-50%, -50%); 
     -o-transform: translate(-50%, -50%); 
     transform: translate(-50%, -50%); 
  }
  </code></pre>
  
  <p>but the problem is that i would like to fade down this div on each slide so I use animate.css and apply it on the slide</p>
  
  <pre><code>.slick-active .inpo{
  
     animation:fadeInDown 1s both 1s;
  }
  </code></pre>
  
  <p>and this broke the center div. I don't have any problem with fadeIn but with fadeInDown</p>
  
  <p>the fadeInDown also use the css transform :</p>
  
  <pre><code>  @-webkit-keyframes fadeInDown {
        from {
          opacity: 0;
          -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0);
        }
  
        to {
          opacity: 1;
          -webkit-transform: none;
          transform: none;
        }
      }
  
      @keyframes fadeInDown {
        from {
          opacity: 0;
          -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0);
        }
  
        to {
          opacity: 1;
          -webkit-transform: none;
          transform: none;
        }
      }
  
      .fadeInDown {
        -webkit-animation-name: fadeInDown;
        animation-name: fadeInDown;
      }
  </code></pre>
  
  <p>So I wonder if anyone knows how to use transform animation on a center div with transform</p>