[CSS] 애니메이션 - 슬롯머신 (animation slot)

슬롯머신처럼 돌아가는 애니메이션을 한번 구현해볼까요

이런 슬롯머신 보면 그림들이 위로 쫘르르르르륵 올라가죠! 그걸 한번 애니메이션으로 구현해 보려합니다

@keyframes slide {
 0% {margin-top: 0;}
 10% {margin-top: -50px;}
 20% {margin-top: -100px;}
 30% {margin-top: -150px;}
 40% {margin-top: -200px;}
 50% {margin-top: -250px;}
 60% {margin-top: -300px;}
 70% {margin-top: -350px;}
 80% {margin-top: -400px;}
 90% {margin-top: -450px;}
 100% {margin-top: -500px;}
}

위와같이 keyframes를 이용하여 애니메이션 동작을 정의해줍니다

<div class="container">
 <ul class="slide-box">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
 </ul>
</div>

위의 코드는 html 코드입니다 간단하게 짜보았습니다

 

list형식으로 1, 2, 3, 4, 5 가 나타나게 될텐데요 이제 CSS를 정의해주어야합니다

.container {
 width: 50px;
 height: 50px;
 overflow: hidden;
 background-color: #000000;
}
.slide-box {
 width: 50px;
 height: 50px * 5;
 animation: slide 1s infinite;
}
.slide-box li {
 width: 50px;
 height: 50px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 30px;
 color: #ffffff;
 font-weight: bold;
}

css또한 간단하게 짜보았습니다. 여기서 제일 중요한부분은 animation 이 적혀있는 부분이겠죠? keyframes에 정의한 slide를 가져와서 애니메이션을 실행시킵니다

 

위와 같이 작성하셧다면 한번 실행해 보세요