<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-6 offset-md-3"> <div class="card" style="margin:50px 0"> <div class="card-header">Checkbox Animation</div> <ul class="list-group list-group-flush"> <li class="list-group-item"> Bootstrap Checkbox Default <label class="checkbox"> <input type="checkbox" /> <span class="default"></span> </label> </li> <li class="list-group-item"> Bootstrap Checkbox Primary <label class="checkbox"> <input type="checkbox" /> <span class="primary"></span> </label> </li> <li class="list-group-item"> Bootstrap Checkbox Success <label class="checkbox"> <input type="checkbox" /> <span class="success"></span> </label> </li> <li class="list-group-item"> Bootstrap Checkbox Info <label class="checkbox"> <input type="checkbox" /> <span class="info"></span> </label> </li> <li class="list-group-item"> Bootstrap Checkbox Warning <label class="checkbox"> <input type="checkbox" /> <span class="warning"></span> </label> </li> <li class="list-group-item"> Bootstrap Checkbox Danger <label class="checkbox"> <input type="checkbox" /> <span class="danger"></span> </label> </li> </ul> </div> </div> </div> </div>

@keyframes check {0% {height: 0;width: 0;} 25% {height: 0;width: 10px;} 50% {height: 20px;width: 10px;} } .checkbox{background-color:#fff;display:inline-block;height:28px;margin:0 .25em;width:28px;border-radius:4px;border:1px solid #ccc;float:right} .checkbox span{display:block;height:28px;position:relative;width:28px;padding:0} .checkbox span:after{-moz-transform:scaleX(-1) rotate(135deg);-ms-transform:scaleX(-1) rotate(135deg);-webkit-transform:scaleX(-1) rotate(135deg);transform:scaleX(-1) rotate(135deg);-moz-transform-origin:left top;-ms-transform-origin:left top;-webkit-transform-origin:left top;transform-origin:left top;border-right:4px solid #fff;border-top:4px solid #fff;content:'';display:block;height:20px;left:3px;position:absolute;top:15px;width:10px} .checkbox span:hover:after{border-color:#999} .checkbox input{display:none} .checkbox input:checked + span:after{-webkit-animation:check .8s;-moz-animation:check .8s;-o-animation:check .8s;animation:check .8s;border-color:#555} .checkbox input:checked + .default:after{border-color:#444} .checkbox input:checked + .primary:after{border-color:#2196F3} .checkbox input:checked + .success:after{border-color:#8bc34a} .checkbox input:checked + .info:after{border-color:#3de0f5} .checkbox input:checked + .warning:after{border-color:#FFC107} .checkbox input:checked + .danger:after{border-color:#f44336}