Shutter Animation

by HugeHugh

HTML

<div class="iris">
    <b></b>
</div>

CSS

.iris {
    width:32px; height:32px; border-radius:32px;
    margin:40px; position:relative; background:#428bca; z-index:10;
}
.iris b {
    display:block;
    width:32px; 
    height:32px; 
    border-radius:32px; 
    position:absolute; 
    left:0; 
    top:0; 
    z-index:15;
    
    
    box-shadow: 
inset 8px -14px 0 rgba(35,74,107,0.3),
inset 8px 14px 0 rgba(35,74,107,0.3),
inset -16px 0 0 rgba(35,74,107,0.3);
    

inset 8px -14px 0 rgba(35,74,107,0.3),
inset 8px 14px 0 rgba(35,74,107,0.3),
inset -16px 0 0 rgba(35,74,107,0.3);
}

@-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 8px -14px 0 rgba(35,74,107,0.3),
inset 8px 14px 0 rgba(35,74,107,0.3),
inset -16px 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');
    });
});