Iris Wipe Transition

HTML

<div id="iris"></div>

CSS

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body {
    background-image: url('http://www.personalblimp.com/images/front_page.jpg');
    background-size: cover;
}
div#iris {
    width: auto;
    /* adjust these initial dimensions to get the edges of the initial iris just out of view */
    right: -20%;
    left: -50%;
    top: -50%;
    height: auto;
    box-shadow: 0px 0px 0px 100rem #000;
    position: absolute;
    display: none;
    border-radius: 50%;
}
div#iris.collapse {
    display: block;
    -webkit-animation: collapse 5s ease-in-out infinite alternate;
}
div#iris:after {
    content: '';
    display: block;
    /* maintains a 1:1 aspect ration for perfect circle */
    padding-top: 100%;
}
@-webkit-keyframes collapse {
     0% {
        top: -50%;
        left: -50%;
        right: -50%;
    }
    /* adjust these coordinates to change where the wipe centers */
    100% {
         top: 15%;
        /* left + right should equal 100 to guarantee a complete wipe */
        left: 55%;
        right: 45%;
    }
}

JavaScript

$('div#iris').addClass('collapse');