[HTML/CSS]Animation에서 step기능 알아보기

 

 

안녕하세요 무택입니다 :)

오늘은 animation 옵션 중에서 steps에 대한 설명을 해보려고 합니다.

 

 

HTML/CSS 코드

<style>
*{
  padding: 0;
  margin: 0;
}

.box_wrap {
  background-color: #f4f4f4;
  width: 300px;
  height: 300px;
  margin-top : 32px;
  position: relative;
}
.box_wrap .box {
  position: relative;
  text-align: center;
  display: inline-block;
  background-color: #ff9900;
  width: 150px;
  height: 60px;
  animation: box_move 10s steps(10) infinite;
  float: left;
  line-height: 60px;
}
.box_wrap .box2 {
  animation: box_move 10s infinite;
}
@keyframes box_move {
  0% {
    top: 0;
  }
  50% {
    top: 240px;
  }
  100% {
    top: 0;
  }
}


.text_wrap {
  animation: text_ani 10s steps(8) infinite;
  overflow: hidden;
  text-wrap: nowrap;
}
@keyframes text_ani {
  0% {
    width: 0px;
  }
  50% {
    width: 173px;
  }
  100% {
    width: 0px;
  }
}
</style>

<div class="box_wrap">
  <div class="box">step</div>
  <div class="box box2">non-step</div>
</div>
<div class="text_wrap">
  <span>한</span>
  <span>글</span>
  <span>자</span>
  <span>씩</span>
  <span>보</span>
  <span>여</span>
  <span>주</span>
  <span>기</span>
</div>

 

 

Codepen

See the Pen [CSS}animation step 사용 by TytanLee (@TytanLee) on CodePen.

 

 

 

개념 설명

오늘 사용한 `steps` 옵션은 프레임을 설정해 주는 기능입니다.

애니메이션 옵션에서 기본 설정은 자연스럽게 움직이는 것이지만 `steps`옵션을 넣어주면 몇 단계를 통해서 애니메이션을 보여줄 것인지 설정할 수 있습니다.

 

 

왜 사용하는지

시곗바늘이 딱딱 움직이는 연출을 할 수도 있고, 위 예시처럼 텍스트를 한 글자씩 노출시키는 연출을 할 수도 있고 다양한 연출을 할 수 있기 때문에 사용합니다. 아무래도 정적인 웹보다는 동적인 웹이 지루하지 않기 때문이죠.