Shutter Animation

HTML

<div class="iris">
    hirere bes zere
    <b></b>
</div>

CSS

.iris {
    width:10000; height:100000 border-radius:100px; overflow:hidden; border:1px solid black;
    margin:4px; position:relative; background:#428bca; z-index:10;
}
.iris b {
    display:block;
    width:10000; 
    height:10000; 
    border-radius:100000 
    position:absolute; 
    left:0; 
    top:0; 
    z-index:15;
}

@-webkit-keyframes shutter_anim
{
  0% {
box-shadow: 
inset 0 0 0 rgba(35,74,107,0.3),
inset 0 0 0 rgba(35,74,107,0.3),
inset 0 0 0 rgba(35,74,107,0.3);
  }
  50% {
box-shadow: 
inset 25px -43px 0 rgba(35,74,107,0.3),
inset 25px 43px 0 rgba(35,74,107,0.3),
inset -50px 0 0 rgba(35,74,107,0.3);
-webkit-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-ms-transform:rotate(30deg);
-o-transform:rotate(30deg);
transform:rotate(30deg);
  }
  100% {
box-shadow: 
inset 0 0 0 rgba(35,74,107,0.3),
inset 0 0 0 rgba(35,74,107,0.3),
inset 0 0 0 rgba(35,74,107,0.3);
  }
}

.iris.clicked b {
  -webkit-animation: shutter_anim 500ms;
}

JavaScript

$(function() {
    $('.iris').click(function() {
        var that = this;
        $('b', that).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() {
            $(that).removeClass('clicked');
        });
        $(that).addClass('clicked');
    });
});