Rotate an image 180 degrees on click with jquery with animation

$(document).ready(function() {
    $( ".toggle" ).click( function() {
        $("#image").toggleClass('flip');
    });
});

#image {
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  transition: transform 1s;
}

.flip {
  transform: rotate(-180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<img class="toggle" id="image" src="https://i.imgur.com/uLlPUfM.png"/>