Clip Animation

HTML

<div class="box">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg">
</div>

<button>toggle</button>

CSS

.box {
    position:absolute;
    top:50px;
    clip:rect(0px,260px,200px,0px);
    -webkit-transition:300ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
}

JavaScript

var bool = false;

$('button').click(function(){
    if(!bool){
        $('.box').css('clip','rect(0px,260px,10px,0px)');
    } else {
        $('.box').css('clip','rect(0px,260px,200px,0px)');
    }
    bool = !bool;
});