Problem with Magnific Popup Dailog css 3 animation effect

I just found this searching and its too much good for popup effecr http://dimsemenov.com/plugins/magnific-popup/

I tried too much applying the same for my own but doesn't work..
even its working fine on http://codepen.io/dimsemenov/pen/GAIkt on codepen but when creating a blank file the code of the codepen it doesn't work followed all the guidelines but still not working.

Can anyone give me the short file with the code of the codepen that i have mentioned

 

The best would be for you to post the content of your files here.

 

import these libraries
http://dimsemenov-static.s3.amazonaws.com/dist/magnific-popup.css
http://dimsemenov-static.s3.amazonaws.com/dist/jquery.magnific-popup.min.js

<div class="links">
  <ul id="inline-popups">
    <li><a href="#test-popup" data-effect="mfp-zoom-in">Zoom</a></li>
 
<!-- Popup itself -->
<div id="test-popup" class="white-popup mfp-with-anim mfp-hide">Text that popups with animation</div>

HTML:

html,body {margin:0; padding:10px; -webkit-backface-visibility:hidden;}

/* text-based popup styling */
.white-popup {
  position: relative;
  background: #FFF;
  padding: 25px;
  width:auto;
  max-width: 400px;
  margin: 0 auto;
}





/*

====== Zoom effect ======

*/
.mfp-zoom-in {

  /* start state */
  .mfp-with-anim {
    opacity: 0;
    transition: all 0.2s ease-in-out;
    transform: scale(0.8);
  }

  &.mfp-bg {
    opacity: 0;
      transition: all 0.3s ease-out;
  }

  /* animate in */
  &.mfp-ready {
    .mfp-with-anim {
      opacity: 1;
      transform: scale(1);
    }
    &.mfp-bg {
      opacity: 0.8;
    }
  }

  /* animate out */
  &.mfp-removing {
  
    .mfp-with-anim {
      transform: scale(0.8);
      opacity: 0;
    }
    &.mfp-bg {
      opacity: 0;
    }
  
  }

}


/*

Code (CSS):

// Inline popups
$('#inline-popups').magnificPopup({
  delegate: 'a',
  removalDelay: 500, //delay removal by X to allow out-animation
  callbacks: {
    beforeOpen: function() {
       this.st.mainClass = this.st.el.attr('data-effect');
    }
  },
  midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});


// Image popups
$('#image-popups').magnificPopup({
  delegate: 'a',
  type: 'image',
  removalDelay: 500, //delay removal by X to allow out-animation
  callbacks: {
    beforeOpen: function() {
      // just a hack that adds mfp-anim class to markup
       this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
       this.st.mainClass = this.st.el.attr('data-effect');
    }
  },
  closeOnContentClick: true,
  midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});


// Hinge effect popup
$('a.hinge').magnificPopup({
  mainClass: 'mfp-with-fade',
  removalDelay: 1000, //delay removal by X to allow out-animation
  callbacks: {
    beforeClose: function() {
        this.content.addClass('hinge');
    },
    close: function() {
        this.content.removeClass('hinge');
    }
  },
  midClick: true
});

Code (JavaScript):

 

It works just fine. JsFiddle: http://jsfiddle.net/a37j4oh4/
Did you remember to include jQuery before the included files?