CSS Transform and Transition Effect -

i trying figure out way make checkbox transform @ 0% scale(0) 90% scale(1.3) scale(1) has in , out effect. problem i've been trying accomplish past couple of hours , need help. here css.

body {   padding: 100px; }  label {   cursor: pointer; }  input[type="checkbox"] {   display: none; }  .check-sq:before {   content: "\f096";   font-family: "fontawesome";   speak: none;   font-style: normal;   font-weight: normal;   font-variant: normal;   text-transform: none;   line-height: 1;   -webkit-font-smoothing: antialiased;   width:1em;   display: inline-block;   margin-right: 5px; }   :checked + .check-sq:before {   content: "\f14a";   color: #06a3e9;    /* needing */    transform: scale(0) scale(1.3) scale(1);   transition: 1s transform ;   } 

maybe work.

:checked + .check-sq:before {       animation: nameyouranimation [duration] forwards; }  @keyframes nameyouranimation {   0% {     transform: scale(0);   }   90% {     transform: scale(1.3);   }   100% {     transform: scale(1);   } }