スクロールを促す動き

<div class="type" id="type01">
  <p>Scroll Down Line #1</p>
  <a href="#type02">Scroll</a>
</div>
<div class="type" id="type02">
  <p>Scroll Down Line #2</p>
  <a href="#type03">Scroll</a>
</div>
<div class="type" id="type03">
  <p>Scroll Down Line #3</p>
  <a href="#type04">Scroll</a>
</div>
<div class="type" id="type04">
  <p>Scroll Down Line #4</p>
  <a href="#type05">Scroll</a>
</div>
<div class="type" id="type05">
  <p>Scroll Down Line #5</p>
  <a href="#type06">Scroll</a>
</div>
<div class="type" id="type06">
  <p>Scroll Down Line #6</p>
  <a href="#type07">Scroll</a>
</div>
<div class="type" id="type07">
  <p>Scroll Down Line #7</p>
  <a href="#thanks">Scroll</a>
</div>

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap');
* {
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
.type {
  position: relative;
  width: 100%;
  height: 100vh;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80%;
    background: linear-gradient(180deg,rgba(#000, 0) 0, rgba(#000, .8) 80%, rgba(#000, .8) 100%);
  }
  p {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    color: #fff;
    font : normal 300 64px/1 'Josefin Sans', sans-serif;
    text-align: center;
    white-space: nowrap;
  }
}
#type01 { background-image: url(https://picsum.photos/1200/800?image=575); }
#type02 { background-image: url(https://picsum.photos/1200/800?image=1016); }
#type03 { background-image: url(https://picsum.photos/1200/800?image=869); }
#type04 { background-image: url(https://picsum.photos/1200/800?image=506); }
#type05 { background-image: url(https://picsum.photos/1200/800?image=1037); }
#type06 { background-image: url(https://picsum.photos/1200/800?image=901); }
#type07 { background-image: url(https://picsum.photos/1200/800?image=675); }
#thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  p {
    &:nth-child(1) {
      margin-bottom: 60px;
      color: #333;
      font : normal 300 64px/1 'Josefin Sans', sans-serif;
    }
    &:nth-child(2) {
      color: #333;
      font : normal 400 20px/1 'Josefin Sans', sans-serif;
    }
  }
  a {
    color: #333;
    text-decoration: none;
    transition: .3s;
    &:hover {
      color: #888;
    }
  }
}



.type a {
  display: inline-block;
  position: absolute;
  right: 40px;
  bottom: 0;
  z-index: 2;
  padding: 10px 10px 110px;
  color: #fff;
  font-size: 14px;
  font-family: 'Josefin Sans', sans-serif;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr;
  transition: .2s;
  overflow: hidden;
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 100px;
    background: #fff;
  }
  &:hover {
    opacity: .5;
  }
}

#type01 a::after {
  animation: sdl01 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl01 {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

#type02 a::after {
  animation: sdl02 2.5s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl02 {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  25% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  25.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  40%, 100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

#type03 a::after {
  animation: sdl03 2s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl03 {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  30% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  70% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

#type04 a::after {
  animation: sdl04 2s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl04 {
  0% {
    opacity: 1;
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  30% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  30.1%, 70% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    opacity: 0;
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

#type05 a::after {
  height: 30px;
  animation: sdl05 1.5s ease infinite;
}
@keyframes sdl05 {
  0% {
    transform: translateY(-70px);
  }
  50%, 100% {
    transform: translateY(30px);
  }
}

#type06 a {
  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 100px;
    background: rgba(#fff, .4);
  }
  &::after {
    animation: sdl06 1.5s cubic-bezier(1, 0, 0, 1) infinite;
  }
}
@keyframes sdl06 {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

#type07 a {
  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 100px;
    background: rgba(#fff, .4);
  }
  &::after {
    height: 30px;
    animation: sdl07 1.5s ease infinite;
  }
}
@keyframes sdl07 {
  0% {
    transform: translateY(-70px);
  }
  50%, 100% {
    transform: translateY(30px);
  }
}