선 위에서 아래로 반복하기 transform-origin

 

방법1

선을 위애서 아래로 늘어나는 크기 조절

다시 위로 올라가는 반복 애니메이션

 

 

transform-origin: top 스케일 y를 0-1로  아래로 늘리고 

transform-origin: bottom  스케일 y를 1-0으로 줄어들게한다. 

 

---

@keyframes scaleLine {

  /* 시작위치 위로 바꾸고 고정*/

  0% {

    transform-origin: top;

  }

  49% {

    transform-origin: top;

  }

  /* 아래로 내리리며 위치 고정 */

  50% {

    transform: scaleY(1);

    transform-origin: bottom;

  }

  100% {

    transform: scaleY(0);

    transform-origin: bottom;

  }

}

0-49% 까지는 위에서 내리는것 

50-100%까지는 바닥으로 내리는것

 

 

---

.main_slider_wrap .scroll_ani:after {

  content: '';

  position: absolute;

  left: 50%;

  bottom: -45px;

  width: 1px;

  height: 40px;

  background-color: #fff;

  transform: scaleY(0);

  animation: scaleLine 1.5s infinite linear;

  /* linear 속도조절을 하지 않겠다 */

}