// source http://jsbin.com/sinaxuloze/2

css-checkbox.html

<style id="jsbin-css">
.tcon-checkbox {
  position: relative;
  cursor: pointer;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  cursor: pointer;
  padding-left: 20px;
}
.tcon-checkbox:before { 
  border: none;
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  border: solid 2px #ddd;
  height: 15px;
  width: 15px;
  top: 0;
  left: 0;
  content: '';
  
  transition: transform 0.2s;
  -webkit-transition: transform 0.2s;
}
.tcon-transform.tcon-checkbox:before {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  border-top: none;
  border-left: none;
  border-bottom: solid 2px #0F9D58;
  border-right: solid 2px #0F9D58;
  top: -4px;
  left: 6px;
  width: 8px;
  height: 16px;
}
.animate-checkmark {
  -webkit-animation: checkmark-shrink 120ms ease-out;
  animation: checkmark-shrink 120ms ease-out
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  <div class="tcon-checkbox">Yassine</div>
<script id="jsbin-javascript">
$('.tcon-checkbox').click(function() {
  var $e = $(this);
  $(this).toggleClass('tcon-transform animate-checkmark');
  return false;
});
</script>
<script id="jsbin-source-html" type="text/html"><script src="//code.jquery.com/jquery-1.9.1.min.js"><\/script>  <div class="tcon-checkbox">Yassine</div></script>

<script id="jsbin-source-css" type="text/css">.tcon-checkbox {
  position: relative;
  cursor: pointer;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  cursor: pointer;
  padding-left: 20px;
}
.tcon-checkbox:before { 
  border: none;
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  border: solid 2px #ddd;
  height: 15px;
  width: 15px;
  top: 0;
  left: 0;
  content: '';
  
  transition: transform 0.2s;
  -webkit-transition: transform 0.2s;
}
.tcon-transform.tcon-checkbox:before {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  border-top: none;
  border-left: none;
  border-bottom: solid 2px #0F9D58;
  border-right: solid 2px #0F9D58;
  top: -4px;
  left: 6px;
  width: 8px;
  height: 16px;
}
.animate-checkmark {
  -webkit-animation: checkmark-shrink 120ms ease-out;
  animation: checkmark-shrink 120ms ease-out
}</script>

<script id="jsbin-source-javascript" type="text/javascript">$('.tcon-checkbox').click(function() {
  var $e = $(this);
  $(this).toggleClass('tcon-transform animate-checkmark');
  return false;
});</script>

jsbin.sinaxuloze.css

.tcon-checkbox {
  position: relative;
  cursor: pointer;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  cursor: pointer;
  padding-left: 20px;
}
.tcon-checkbox:before { 
  border: none;
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  border: solid 2px #ddd;
  height: 15px;
  width: 15px;
  top: 0;
  left: 0;
  content: '';
  
  transition: transform 0.2s;
  -webkit-transition: transform 0.2s;
}
.tcon-transform.tcon-checkbox:before {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  border-top: none;
  border-left: none;
  border-bottom: solid 2px #0F9D58;
  border-right: solid 2px #0F9D58;
  top: -4px;
  left: 6px;
  width: 8px;
  height: 16px;
}
.animate-checkmark {
  -webkit-animation: checkmark-shrink 120ms ease-out;
  animation: checkmark-shrink 120ms ease-out
}

jsbin.sinaxuloze.js

$('.tcon-checkbox').click(function() {
  var $e = $(this);
  $(this).toggleClass('tcon-transform animate-checkmark');
  return false;
});