How can I make my CSS toggle state changing smoother e.g. with a transition?

I’ve created a toggle in CSS:

jQuery( document ).ready( function ( $ ) {
    $( document ).on( 'click', '.checkbox-toggle-wrapper .checkbox-toggle', function () {
        $( this ).toggleClass( 'enabled' );
    } )
} );
.checkbox-toggle-wrapper {
    margin-right: 12px;
    margin-top: 5px;
    margin-left: 1px;

.checkbox-toggle-wrapper .checkbox-toggle:not(.enabled)::before {
    right: auto;
    left: 0;

.checkbox-toggle-wrapper .checkbox-toggle:not(.enabled) {
    border-color: #999;
    background-color: #999;

.checkbox-toggle-wrapper .checkbox-toggle {
    height: 16px;
    width: 32px;
    border: 2px solid #00695c;
    background-color: #00695c;
    display: inline-block;
    text-indent: -9999px;
    border-radius: 10em;
    position: relative;
    margin-top: -1px;
    vertical-align: text-top;
    cursor: pointer;

.checkbox-toggle-wrapper .checkbox-toggle::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background: #fff;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 100%;
<script src=""></script>
<div class="checkbox-toggle-wrapper">
  <span class="checkbox-toggle enabled"></span>

I’m looking now for a way to make everything a bit more smoother. I’ve tried out setting transition: transition: all .3s but this seems not to work. Any ideas?