<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
margin:0;
padding:0;
}
.door{
/* width:450px;
height:450px;*/
margin:0 auto;
width:1200px;
height:600px;
position:relative;
background:#a1a1a1;
}
.door .leftDoor,.door .rightDoor{
position:absolute;
/* width:224px;
height:400px;*/
width:600px;
height:520px;;
top:50px;
background:#d1d1d1;
}
.door .leftDoor{
left:0;
border-right:1px solid #999;
box-shadow:inset -2px -2px 10px rgba(0, 0, 0, 0.1);
-webkit-animation:leftDoor 2s 1;
-webkit-transform-origin: 0% 40%;
}
.door .rightDoor{
right:0;
border-left:1px solid #999;
box-shadow:inset 2px -2px 10px rgba(0, 0, 0, 0.1);
-webkit-animation:rightDoor 2s 1;
-webkit-transform-origin: 100% 40%;
}
@-webkit-keyframes leftDoor {
0%,100% {
-webkit-transform-origin: 0% 40%;
}
0%{
-webkit-transform:perspective(0) rotateY(0) scale(1);
}
100% {
-webkit-transform:perspective(800px) rotateY(-90deg) scale(0.2,1);
}
}
@-webkit-keyframes rightDoor {
0%,100% {
-webkit-transform-origin: 100% 40%;
}
0%{
-webkit-transform:perspective(0) rotateY(0) scale(1);
}
100% {
-webkit-transform:perspective(800px) rotateY(90deg) scale(0.2,1);
}
}
</style>
</head>
<body>
<div class="door">
<div class="leftDoor"></div>
<div class="rightDoor"></div>
</div>
</body>
</html>
