css 3ポップアップボックスのフェードアウト4種類のアニメーション

	
		
			
		 
		
		
	


	
		
    
		    
		
		
		
Y    
		Y    
		
		
Y    
		Y    
		
		
    
		    
		
		
    
		    
		
		
Y    
		clickY    
		
		
Y    
		Y    
		
		
    
		    
	
	
	
	var boo=0;
 	var canUse=document.getElementsByTagName("body")[0].style;
    if(typeof canUse.animation!="undefined"||typeof canUse.WebkitAnimation!="undefined"){
       	boo=1;/*    */
    }else{
       	boo=0;/*     */
    }
    
	
 	$('#action_skew').click(function(){
		actionIn("#box_action_skew",'action_skew',1,"linear");
	}) 
 	
 	$('#action_rotateY').click(function(){
		actionIn("#box_action_rotateY",'action_rotateY',1,"linear");	
	}) 
 	
    $('#action_translateY').click(function(){
		actionIn("#box_action_translateY",'action_translateY',1,"");
	})	 
    
    $('#action_scale').click(function(){
 		actionIn("#box_action_scale",'action_scale',1,"");
	})	
	
	/*obj,actionName,speed   string,time( ) int  */
	function actionIn(obj,actionName,time,speed){
		$(obj).show();
		if(boo==1)$(obj).css({"animation":actionName+" "+time+"s"+" "+speed,"animation-fill-mode":"forwards"});
	}
    /*---  ----*/

   $('#action_skewOut').click(function(){
   		actionOut("#box_action_skewOut",'action_skewOut',1,"linear");
	}) 
	
	$('#action_rotateYOut').click(function(){
		actionOut("#box_action_rotateYOut",'action_rotateYOut',1,"linear");
	}) 
	
	
	$('#action_translateYOut').click(function(){
		actionOut("#box_action_translateYOut",'action_translateYOut',1,"");
	}) 
	
	$('#action_scaleOut').click(function(){
		actionOut("#box_action_scaleOut",'action_scaleOut',1,"");
	}) 
	
	/*obj,actionName,speed   string,time( ) int  */
   function actionOut(obj,actionName,time,speed){
   		if(boo==1){
			$(obj).css({"animation":actionName+" "+time+"s"+" "+speed});
			var setInt_obj=setInterval(function(){
				$(obj).hide();
				clearInterval(setInt_obj);
			},time*1000);
		}else $(obj).hide();
   }