JSFiddle - React, Tailwind, and code Playground
by social_quotient
HTML
<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;} ...