<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script src="/prefixfree/"></script>
<script src="jquery-2.1."></script>
</head>
<style type="text/css">
div{background: red;
width: 100px;
height: 100px;
display: none;
/*transform-origin:0 0; Deform with a point as the center, default center center*/
}
@keyframes action_skew{
0%{transform: skew(-40deg);opacity: 0;}
50%{ transform: skew(40deg);opacity: 0.2;}
100%{ transform: skew(0deg);opacity: 1;}
}
@keyframes action_rotateY{
0%{transform: rotateY(0deg);opacity: 0;}
50%{ transform: rotateY(180deg);opacity: 0.2;}
100%{ transform: rotateY(360deg);opacity: 1;}
}
@keyframes action_translateY{
0%{transform: translateY(50px);opacity: 0;}
100%{ transform: translateY(0px);opacity: 1;}
}
@keyframes action_scale{
0%{transform: scale(0.2);opacity: 0;}
100%{ transform: scale(1);opacity: 1;}
}
/*---fade out----*/
@keyframes action_skewOut{
0%{transform: skew(40deg);opacity: 1;}
50%{ transform: skew(-40deg);opacity: 0.2;}
100%{ transform: skew(0deg);opacity: 0;}
}
@keyframes action_rotateYOut{
0%{transform: rotateY(360deg);opacity: 1;}
50%{ transform: rotateY(180deg);opacity: 0.2;}
100%{ transform: rotateY(0deg);opacity: 0;}
}
@keyframes action_translateYOut{
0%{transform: translateY(0px);opacity: 1;}
100%{ transform: translateY(50px);opacity: 0;}
}
@keyframes action_scaleOut{
0%{transform: scale(1);opacity: 1;}
100%{ transform: scale(0.2);opacity: 0;}
}
</style>
<body>
<div >Transformed Fade in</div>
<button >Twisted Fade in</button>
<div >Y rotation fade in</div>
<button >Y rotation fade in</button>
<div >Y translation fades into</div>
<button >Y translation fades into</button>
<div >Scaling Fade in</div>
<button >Scaling Fade In</button>
<!---Fare Out--->
<div style="display: block;background: yellow;">Transformed fade</div>
<button >Twisted fade out</button>
<div style="display: block;background: yellow;">Y rotation fades out</div>
<a href="http://s.">click</a><button >Y rotation fade out</button>
<div style="display: block;background: yellow;">Y pan fade out</div>
<button >Y Pan Fade Out</button>
<div style="display: block;background: yellow;">Scaling fade out</div>
<button >Scaling Fadeout</button>
</body>
<script>
var boo=0;
var canUse=("body")[0].style;
if(typeof !="undefined"||typeof !="undefined"){
boo=1;/*Support animation*/
}else{
boo=0;/*No animation supported*/
}
$('#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 are all string, time (seconds) is int type*/
function actionIn(obj,actionName,time,speed){
$(obj).show();
if(boo==1)$(obj).css({"animation":actionName+" "+time+"s"+" "+speed,"animation-fill-mode":"forwards"});
}
/*---fade out----*/
$('#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 are all string, time (seconds) is int type*/
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();
}
</script>
</html>This is my own use of h5New FeaturesThe animations you write can be pasted directly.