kattstaa
<!doctype html>
<meta charset="utf-8">
<title>Hej</title>
<link href="animation.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"><h19>Elias Sandberg</h19></div>
<div id="box6"><h20>Educator:</h20></div>
<div id="box7"><h21>Owner of the guide</h21></div>
</body>
</html>
<style>
@charset "utf-8";
#box1{
width:45%;
margin-left:5%;
background-color:#999;
position:fixed;
left:2%;
animation-name:ett,ett2;
animation-duration:2s,2s;
animation-delay:10s,15s;
z-index: 10;
}
@keyframes ett{
0%{top:920px; height:300px;}
50%{top:620px;}
100%{top:620px; height:0px;}
}
@keyframes ett2{
0%{top:620px; height:0px;}
50%{top:620px; height:300px;}
100%{top:920px;height:0px;}
}
#box2{
width:45%;
margin-left:5%;
background-color:#88CC88;
position:fixed;
left:2%;
animation-name:tva,tva2;
animation-duration:2s,2s;
animation-delay:10.2s,15.2s;
z-index: 100;
}
@keyframes tva{
0%{top:920px; height:300px;}
50%{top:620px;}
100%{top:620px; height:0px;}
}
@keyframes tva2{
0%{top:620px; height:0px;}
50%{top:620px; height:300px;}
100%{top:920px;height:0px;}
}
#box3{
width:45%;
margin-left:5%;
background-color:#55AA55;
position:fixed;
left:2%;
animation-name:tre,tre2;
animation-duration:2s,2s;
animation-delay:10.4s,15.4s;
z-index: 1000;
}
@keyframes tre{
0%{top:920px; height:300px;}
50%{top:620px;}
100%{top:620px; height:0px;}
}
@keyframes tre2{
0%{top:620px; height:0px;}
50%{top:620px; height:300px;}
100%{top:920px;height:0px;}
}
}
#box4{
width:45%;
margin-left:5%;
background-color:#116611;
position:fixed;
left:2%;
animation-name:fyra,fyra2;
animation-duration:2s,2s;
animation-delay:10.6s,15.6s;
z-index: 10000;
}
@keyframes fyra{
0%{top:920px; height:300px;}
50%{top:620px;}
100%{top:620px; height:0px;}
}
@keyframes fyra2{
0%{top:620px; height:0px;}
50%{top:620px; height:300px;}
100%{top:920px;height:0px;}
}
#box5{
width:45%;
height:0px;
margin-left:5%;
background-color:#004400;
position:fixed;
left:2%;
animation-name:fem,fem1,fem2;
animation-duration:2s,3.8s,2s;
animation-delay:10.7s,12s,15.8s;
z-index: 100000;
}
#box5 h19{
font-family:Georgia;
color:white;
text-align:center;
font-size:100px;
}
@keyframes fem{
0%{top:920px; height:300px;}
50%{top:620px;}
100%{top:620px; height:120px;}
}
@keyframes fem1{
0%{height:120px;top:620px}
100%{height:120px;top:620px}
}
@keyframes fem2{
0%{top:620px; height:120px;}
50%{top:620px; height:300px;}
100%{top:920px;height:0px;}
}
#box6{
width:15%;
height:0px;
margin-left:5%;
position:fixed;
left:2%;
opacity:0;
animation-name:sex,sex1,sex2;/*sex2 är mellanrummet*/
animation-duration:1s,1s,1.8s;
animation-delay:12s,14.8s,13s;
}
#box6 h20{
font-family:Verdana;
text-align:center;
color:#999;
font-size:50px;
}
@keyframes sex{
0%{height:75px;top:620px;opacity: 1;}
100%{height:75px;top:565px;opacity: 1;}
}
@keyframes sex1{
0%{height:75px;top:565px;opacity: 1;}
100%{height:0px;top:620px;opacity: 1;}
}
@keyframes sex2{
0%{height:75px;top:565px;opacity: 1;}
100%{height:75px;top:565px;opacity: 1;}
}
#box7{
width:25%;
height:0px;
margin-left:5%;
position:fixed;
left:2%;
background-color:white;
opacity:0;
box-shadow:2px 2px 20px black;
animation-name:sju,sju1,sju2;
animation-duration:1s,1.8s,1s;
animation-delay:12s,13s,14.8s;
}
#box7 h21{
font-family:Georgia;
font-size:40px;
color:#004400;
text-align:center;
margin-left:1%;
}
@keyframes sju{
0%{height:50px;top:690px;opacity:1;}
100%{height:50px;top:740px;opacity:1;}
}
@keyframes sju1{
0%{height:50px;top:740px;opacity:1;}
100%{height:50px;top:740px;opacity:1;}
}
@keyframes sju2{
0%{height:50px;top:740px;opacity:1;}
100%{height:50px;top:690px;opacity:1;}
}
</style>
Senast uppdaterad 1 juli 2020 klockan 23.57 av CaptainEllevest.