JSFiddle - React, Tailwind, and code Playground

by iamacatperson

HTML

<div class="bird_wing_left"></div>

CSS

.bird_wing_left {
    background: rgba(0, 0, 0, 0) url("http://www.instructables.com/files/orig/FRY/STOL/FNZA8J79/FRYSTOLFNZA8J79.png") repeat scroll 0 0;
    height: 50px;
    width: 50px;	
	transition: all 2s;
}

JavaScript

$bird_wing_left = $(".bird_wing_left");

setInterval(function(){ 
	
		rotate = 30;
		
		// CSS property change only happens here
		$bird_wing_left.css({ transform: "rotate(" + rotate + "deg)" }).delay(1000).queue(function(){
			rotate = 0;
			$(this).css({ transform: "rotate(" + rotate + "deg)" });
			console.log("Rotate value is now:" + rotate);
		});
		
		console.log("Rotate value is Now:" + rotate);
		
	}, 3000);