<style type="text/css">
@keyframes slideout
{
0% {}
88% {left:50%;}
92% {left:60%;}
100% {left:-50%;}
}
@keyframes display
{
0% {}
4% {margin-left:-37px;margin-top:-80px;transform: rotate(-0deg);width:65px;height:150px;padding:5px;} /*display*/
30% {margin-left:-37px;margin-top:-80px;transform: rotate(-0deg);width:65px;height:150px;padding:5px;}
34% {margin-left:-125px;margin-top:-150px;transform: rotate(-95deg);width:198px;height:295px;padding:10px 25px;} /*ipad*/
38% {margin-left:-125px;margin-top:-150px;transform: rotate(-90deg);width:198px;height:295px;padding:10px 25px;}
60% {margin-left:-125px;margin-top:-150px;transform: rotate(-90deg);width:198px;height:295px;padding:10px 25px;}
64% {margin-left:-140px;margin-top:-230px;transform: rotate(-90deg);width:240px;height:445px;padding:10px 20px;} /*macbook*/
68% {margin-left:-140px;margin-top:-230px;transform: rotate(-90deg);width:240px;height:445px;padding:10px 20px;}
72% {margin-left:-5px;margin-top:-154px;transform: rotate(-90deg);width:0px;height:594px;padding:0px 5px;} /*lidclose*/
74% {margin-left:-5px;margin-top:-151px;transform: rotate(-90deg);width:0px;height:594px;padding:0px 5px;} /*bounce*/
76% {margin-left:-5px;margin-top:-154px;transform: rotate(-90deg);width:0px;height:594px;padding:0px 5px;}
100% {margin-left:-5px;margin-top:-154px;transform: rotate(-90deg);width:0px;height:594px;padding:0px 5px;}
}
@keyframes panel
{
0% {}
4% {width:65px;height:115px;} /*display*/
30% {width:65px;height:115px;}
34% {width:198px;height:265px;} /*ipad*/
60% {width:198px;height:265px;}
64% {width:240px;height:415px;} /*macbook*/
68% {width:240px;height:415px;}
72% {width:0px;height:590px;} /*lidclose*/
100% {width:0px;height:590px;}
}
@keyframes case
{
0% {}
64% {top:333px;height:0px;}
68% {top:333px;height:13px;} /*macbook body*/
74% {top:336px;height:13px;} /*bounce*/
76% {top:333px;height:13px;}
100% {height:13px;}
}
@keyframes bar
{
0% {}
30% {height:3px;}
34% {height:0px;} /*ipad*/
100% {height:0px;}
}
@keyframes dot
{
0% {}
68% {height:4px;}
70% {height:0px;} /*lidclose*/
100% {height:0px;}
}
@keyframes black
{
0% {}
60% {width:0px;height:462px;}
64% {width:276px;height:462px;} /*macbook*/
68% {width:276px;height:462px;}
72% {width:0px;height:596px} /*lidclose*/
100% {width:0px;}
}
@keyframes shadow
{
0% {}
4% {margin-left:-35px;border-radius: 70px / 5px;width:70px;} /*display*/
30% {margin-left:-35px;border-radius: 70px / 5px;width:70px;}
34% {margin-left:-140px;border-radius: 280px / 5px;width:280px;} /*ipad*/
60% {margin-left:-140px;border-radius: 280px / 5px;width:280px;}
64% {margin-left:-220px;border-radius: 440px / 5px;width:440px;} /*macbook*/
68% {margin-left:-295px;border-radius: 590px / 5px;width:590px;} /*macbook body*/
100% {margin-left:-295px;border-radius: 590px / 5px;width:590px;}
}
@-webkit-keyframes slideout
{
0% {}
88% {left:50%;}
92% {left:60%;}
100% {left:-100%;}
}
@-webkit-keyframes display
{
0% {}
4% {margin-left:-37px;margin-top:-80px;-webkit-transform: rotate(-0deg);width:65px;height:150px;padding:5px;} /*display*/
30% {margin-left:-37px;margin-top:-80px;-webkit-transform: rotate(-0deg);width:65px;height:150px;padding:5px;}
34% {margin-left:-125px;margin-top:-150px;-webkit-transform: rotate(-95deg);width:198px;height:295px;padding:10px 25px;} /*ipad*/
38% {margin-left:-125px;margin-top:-150px;-webkit-transform: rotate(-90deg);width:198px;height:295px;padding:10px 25px;}
60% {margin-left:-125px;margin-top:-150px;-webkit-transform: rotate(-90deg);width:198px;height:295px;padding:10px 25px;}
64% {margin-left:-140px;margin-top:-230px;-webkit-transform: rotate(-90deg);width:240px;height:445px;padding:10px 20px;} /*macbook*/
68% {margin-left:-140px;margin-top:-230px;-webkit-transform: rotate(-90deg);width:240px;height:445px;padding:10px 20px;}
72% {margin-left:-5px;margin-top:-154px;-webkit-transform: rotate(-90deg);width:0px;height:594px;padding:0px 5px;} /*lidclose*/
74% {margin-left:-5px;margin-top:-151px;-webkit-transform: rotate(-90deg);width:0px;height:594px;padding:0px 5px;} /*bounce*/
76% {margin-left:-5px;margin-top:-154px;-webkit-transform: rotate(-90deg);width:0px;height:594px;padding:0px 5px;}
100% {margin-left:-5px;margin-top:-154px;-webkit-transform: rotate(-90deg);width:0px;height:594px;padding:0px 5px;}
}
@-webkit-keyframes panel
{
0% {}
4% {width:65px;height:115px;} /*display*/
30% {width:65px;height:115px;}
34% {width:198px;height:265px;} /*ipad*/
60% {width:198px;height:265px;}
64% {width:240px;height:415px;} /*macbook*/
68% {width:240px;height:415px;}
72% {width:0px;height:590px;} /*lidclose*/
100% {width:0px;height:590px;}
}
@-webkit-keyframes case
{
0% {}
64% {top:333px;height:0px;}
68% {top:333px;height:13px;} /*macbook body*/
74% {top:336px;height:13px;} /*bounce*/
76% {top:333px;height:13px;}
100% {height:13px;}
}
@-webkit-keyframes bar
{
0% {}
30% {height:3px;}
34% {height:0px;} /*ipad*/
100% {height:0px;}
}
@-webkit-keyframes dot
{
0% {}
68% {height:4px;}
70% {height:0px;} /*lidclose*/
100% {height:0px;}
}
@-webkit-keyframes black
{
0% {}
60% {width:0px;height:462px;}
64% {width:276px;height:462px;} /*macbook*/
68% {width:276px;height:462px;}
72% {width:0px;height:596px} /*lidclose*/
100% {width:0px;}
}
@-webkit-keyframes shadow
{
0% {}
4% {margin-left:-35px;border-radius: 70px / 5px;width:70px;} /*display*/
30% {margin-left:-35px;border-radius: 70px / 5px;width:70px;}
34% {margin-left:-140px;border-radius: 280px / 5px;width:280px;} /*ipad*/
60% {margin-left:-140px;border-radius: 280px / 5px;width:280px;}
64% {margin-left:-220px;border-radius: 440px / 5px;width:440px;} /*macbook*/
68% {margin-left:-295px;border-radius: 590px / 5px;width:590px;} /*macbook body*/
100% {margin-left:-295px;border-radius: 590px / 5px;width:590px;}
}
div.animate {
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-play-state: running;
animation-fill-mode:forwards;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode:forwards;
}
div {
position:relative;
margin:0px;
padding:0px;
z-index:1;
}
div#display {
position:absolute;
top:50%;
left:50%;
overflow:hidden;
animation-name: display;
-webkit-animation-name: display;
padding:5px;
width:0px;
height:0px;
padding:0px;
background-color:#eae8e8;
border-radius:5px;
}
div.black {
animation-name: black;
-webkit-animation-name: black;
width:0px;
height:462px;
position:absolute;
top:2px;
left:2px;
background-color:#000;
border-radius:5px;
}
div#display .dot {
animation-name: dot;
-webkit-animation-name: dot;
width:4px;
height:4px;
background-color:#acacac;
border-radius:4px;
margin:0px auto 2px;
}
div#display .bar {
animation-name: bar;
-webkit-animation-name: bar;
width:14px;
height:3px;
background-color:#acacac;
border-radius:2px;
margin:2px auto 8px;
}
div#display .panel {
animation-name: panel;
-webkit-animation-name: panel;
z-index:10;
width:65px;
height:115px;
background-color:#999999;
}
div#display .button {
background-color:#efefee;
width:6px;
height:6px;
border-radius:10px;
margin:5px auto;
padding:4px;
}
div#display .logo {
width:4px;
height:4px;
border:1px solid #acacac;
}
div#shadow {
animation-name: shadow;
-webkit-animation-name: shadow;
position:absolute;
bottom:10px;
left:50%;
margin-left:-35px;
width: 70px;
height: 5px;
background: rgba(0,0,0,.3);
border-radius: 70px / 5px;
}
div.body {
width:594px;
height:10px;
background-color:#e0e0d9;
overflow:hidden;
z-index:10;
}
div.body div.opener {
width:96px;
height:8px;
border-radius:4px;
top:-4px;
background-color:#a3a097;
margin:0px auto;
}
div.foot {
width:594px;
height:6px;
border-radius:3px;
top:-3px;
z-index:1;
background:-ms-linear-gradient(top, #b5b2ab 50%,#b28f8c 100%);
background:-moz-linear-gradient(top, #b5b2ab 50%,#b28f8c 100%);
background:-webkit-linear-gradient(top, #b5b2ab 50%,#b28f8c 100%);
}
div#case {
animation-name: case;
-webkit-animation-name: case;
height:0px;
overflow:hidden;
width:594px;
position:absolute;
left:50%;
margin-left:-297px;
top:333px;
}
div#animation {
animation-name: slideout;
-webkit-animation-name: slideout;
position:absolute;
top:50%;
left:50%;
margin-left:-297px;
margin-top:-190px;
height:380px;
width:594px;
}
div#container {
background-color:#8dc63f;
margin:30px auto;
border:2px solid #666666;
border-radius:3px;
width:600px;
height:600px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="container">
<div id="animation" class="animate">
<div id="display" class="animate">
<div class="dot animate"></div>
<div class="bar animate"></div>
<div class="panel animate"></div>
<div class="button">
<div class="logo"></div>
</div>
<div class="black animate"></div>
</div>
<div id="case" class="animate">
<div class="body">
<div class="opener"></div>
</div>
<div class="foot"></div>
</div>
<div id="shadow" class="animate"></div>
</div>
</div>