console
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#top {
width: 300px;
height: 150px;
background-color: lightgreen;
position: fixed;
animation: movetop 5s forwards;
top: -200px;
left: -200px;
}
@keyframes movetop {
0%{}
100%{
top: 100px;
left: 475px;
transform: skewX(-45deg);
}
}
#left {
width: 300px;
height: 300px;
background-color: orangered;
position: fixed;
top: 550px;
left: 0px;
animation: moveleft 5s forwards;
}
@keyframes moveleft {
0%{}
100%{
top: 250px;
left: 400px;
transform: rotate(1800deg);
}
}
#right {
width: 150px;
height: 300px;
background-color: purple;
position: fixed;
top: 775px;
left: 1700px;
animation: moveright 5s forwards;
}
@keyframes moveright {
0%{}
100%{
top: 175px;
left: 700px;
transform: skewY(-45deg);
}
}
#dash1 {
width: 300px;
height: 300px;
position: fixed;
border-width: 0 0 2px 2px;
border-style: dashed;
left: 550px;
top: 100px;
}
#dash2 {
width: 150px;
height: 0px;
position: fixed;
left: 400px;
top: 475px;
border-bottom: 2px dashed;
transform: skewY(-45deg);
}
</style>
</head>
<body>
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<div id="dash1"></div>
<div id="dash2"></div>
</body>
</html>