Merhaba jquery veya javascript ile bir fonksiyon içinde ard arda nasıl bir css çalıştırırım
onu merak ediyorum jquery'nin animate ve trigger eventleriyle yapmaya çalıştım ama beceremedim
yapmak istediğim şu

/*Ana css böyle*/
#bg{
	 	position: absolute;
	 	top:0;
	 	left: 0;
	 	width: 100%;
	 	height: 100%;
	 	clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%);
	 	
	 }
	 

/*Ben aşaıdaki iki kodun ard arda gerçekleşmesini istiyorum biri bitince diğeri başlasın
aynı anda değil ard arda gerçekleşsin*/

$(document).ready(function(){ 
	$("#btn1").click(function(){
		$("#bg").css({"clip-path":"polygon(0 78%, 91% 0, 47% 100%, 0 100%)","transition-duration":"1s"});
	    $("#bg").css({"clip-path":"polygon(0 0, 100% 0, 100% 100%, 0 100%)","transition-duration":"2s"});    	
	});
});