I'm attempting to incorporate a CSS animation into an SVG that is enclosed within a button.
Example
<button class="spin">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
<path fill="#626262" d="M12 17a1.72 1.72 0 0 1-1.33-.64l-4.21-5.1a2.1 2.1 0 0 1-.26-2.21A1.76 1.76 0 0 1 7.79 8h8.42a1.76 1.76 0 0 1 1.59 1.05a2.1 2.1 0 0 1-.26 2.21l-4.21 5.1A1.72 1.72 0 0 1 12 17z" />
</svg>
Click here!
</button>
Javascript File
$(".spin").click(function(){
$(this).toggleClass("rotate") ;
});
CSS File
.spin {
-moz-transition: all 2s linear;
-webkit-transition: all 2s linear;
transition: all 2s linear;
}
.spin.rotate {
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}