CSS - Diagonal Movement Animation

by kkdaily

HTML

<div id="box">
don't move please
  <div class="overlay">
      <div class="line"></div>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

#box {
  height: 100vh;
  display: flex;
  flex: 1;
  background: grey;
}

.overlay {
  position: absolute;
  display: flex;
  flex: 1;
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
}

.line {
  position: relative;
  height: 1px;
  width: 0;
  top: 20%;
  left: 20%;
  background: grey;
  transform: rotate(45deg);
  transform-origin: left;
  animation: grow 0.5s linear forwards;
}

@keyframes grow{
    0% {
        opacity: 0;
        width: 0%;
        height: 1px;
        background: red;
    }

    50% {
        opacity: 1;
        width: 25%;
        height: 2px;
        background: orange;
    }

    51% {
        opacity: 1;
        width: 25%;
        height: 1px;
        background: yellow;
    }

    100% {
        opacity: 0;
        width: 50%;
        height: 1px;
        background: green;
    }
}