Bir fonksiyon içinde nasıl ard arda iki farklı css çalıştırırım ?(Çözüldü)

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"});    	
	});
});