* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --length: calc(32vw/1.41);
}

span {
  display: block;
  width: 10vw;
  margin: 7% 10vw;
  line-height: 3rem;
  color: #fff;
  background-color: brown;
  font-family: "arial", sans-serif;
  text-align: center;
  cursor: pointer;
}

div {
  position: fixed;
  top: 90%;
  left: 20%;
  width: 0;
  height: 0;
  transition: .4s 0s;
}

span:hover~div {
  top: 50%;
  left: 50%;
}

span:hover~div:nth-of-type(1) {
  transform: translate(200%, -250%);
  width: 3vw;
  height: 9vw;
  border-top: .6vh solid #000;
  background-color: #333;
  transition: 1.5s .2s, background-color 0s 0s;
}

span:hover~div:nth-of-type(2) {
  transform: translate(-50%, -94%) rotate(45deg);
  width: var(--length);
  height: var(--length);
  background-color: rgb(196, 9, 9);
  transition: 1.5s .1s, background-color 0s 0s;
}

span:hover~div:nth-of-type(3) {
  transform: translate(-50%, -50%);
  width: 32vw;
  height: 20vw;
  background-color: rgb(245, 245, 21);
  transition: 1.5s 0s, background-color 0s 0s;
}

span:hover~div:nth-of-type(4),
span:hover~div:nth-of-type(5) {
  transform: translate(-225%, -110%);
  width: 5vw;
  height: 6vw;
  border: .2vh solid #fff;
  background-color: orange;
  transition: 1.5s .4s, background-color 0s 0s;
}

span:hover~div:nth-of-type(5) {
  width: 8vw;
  transform: translate(60%, -110%);
  transition: 1.5s .5s, background-color 0s 0s;
}

span:hover~div:last-of-type {
  transform: translate(-50%, 25%);
  width: 6vw;
  height: 8vw;
  border: .3vh solid #333;
  background-color: rgb(165, 42, 42);
  transition: 1.5s .3s, background-color 0s 0s;
}