<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>