[CSS] 흐르는 텍스트 배너 애니메이션 (scrolling text animation)

css에서 keyframes와 animation을 사용하여 흐르는 텍스트 배너 애니메이션 만들기

[html]

<div class="scroll-text">

  <div class="track">

    <p>SCROLL TEXT</p>

    <p>SCROLL TEXT</p>

    <p>SCROLL TEXT</p>

    <p>SCROLL TEXT</p>

    <p>SCROLL TEXT</p>

    <p>SCROLL TEXT</p>

    <p>SCROLL TEXT</p>

  </div>

</div>

 

[css]

@keyframes scroll-animation{

  0%{

    left: 0;

  }

  100%{

    left: -400px; /* 텍스트 width와 동일 */

  }

}

.scroll-text{

  width: 100%;

  overflow: hidden;

}

.track{

  display: flex;

  position: relative;

  width: 2800px;

  animation: scroll-animation 5s linear infinite;

}

.track p{

  width: 400px;

  font-size: 36px;

}

 

See the Pen [CSS] scrolling text animation _ 흐르는 텍스트 배너 애니메이션 by Jinsik Son (@Jinsik-Son) on CodePen.