<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Y轴淡入</title>
<style>
.div {
width:300px;
height:200px;
margin:100px auto;
background:url(XXX.png)
}
#animation {
-webkit-animation:flipInY 1s .2s ease both;
-moz-animation:flipInY 1s .2s ease both;
}
@-webkit-keyframes flipInY {
0% {
-webkit-transform:perspective(400px) rotateY(90deg);
opacity:0
}
40% {
-webkit-transform:perspective(400px) rotateY(-10deg)
}
70% {
-webkit-transform:perspective(400px) rotateY(10deg)
}
100% {
-webkit-transform:perspective(400px) rotateY(0deg);
opacity:1
}
}
@-moz-keyframes flipInY {
0% {
-moz-transform:perspective(400px) rotateY(90deg);
opacity:0
}
40% {
-moz-transform:perspective(400px) rotateY(-10deg)
}
70% {
-moz-transform:perspective(400px) rotateY(10deg)
}
100% {
-moz-transform:perspective(400px) rotateY(0deg);
opacity:1
}
}
</style>
</head>
<body>
<div id="animation" class="div"></div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Y轴淡入</title>
<style>
.div {
width:300px;
height:200px;
margin:100px auto;
background:url(XXX.png)
}
#animation {
-webkit-animation:flipInY 1s .2s ease both;
-moz-animation:flipInY 1s .2s ease both;
}
@-webkit-keyframes flipInY {
0% {
-webkit-transform:perspective(400px) rotateY(90deg);
opacity:0
}
40% {
-webkit-transform:perspective(400px) rotateY(-10deg)
}
70% {
-webkit-transform:perspective(400px) rotateY(10deg)
}
100% {
-webkit-transform:perspective(400px) rotateY(0deg);
opacity:1
}
}
@-moz-keyframes flipInY {
0% {
-moz-transform:perspective(400px) rotateY(90deg);
opacity:0
}
40% {
-moz-transform:perspective(400px) rotateY(-10deg)
}
70% {
-moz-transform:perspective(400px) rotateY(10deg)
}
100% {
-moz-transform:perspective(400px) rotateY(0deg);
opacity:1
}
}
</style>
</head>
<body>
<div id="animation" class="div"></div>
</body>
</html>