웨이브 형태의 스켈레톤 만들기 (맥박 X)

 

저는 맥박 형태에서 웨이브로 바꾸려고 시도했는데 바꾸기가 어려웠습니다.

 

팀원 제로가 만들어줘서 기록해두려고 합니다.

 

 

맥박 형태보다 웨이브 형태가 좋은 이유

Bill Chung의 연구에 따르면 스켈레톤 내 애니메이션을 규칙에 맞게 사용하면 사용자가 더 로딩 시간을 더 짧게 느끼게 된다고 합니다.

• 맥박보다는 웨이브 효과
• 왼쪽에서 오른쪽으로 움직이는 애니메이션
• 애니메이션은 Skeleton 컴포넌트에 주의를 끌만큼 빠르지 않아야 함

 

Everything you need to know about skeleton screens

 

 

 

 

CSS 속성

{
  border-radius: 4px;

  background-color: #eee;
  background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
  background-size: 200% 100%;

  animation: 1.7s skeletonGradientWave linear infinite;
}



@keyframes skeletonGradientWave{
  to {
      background-position-x: -200%;
    }
  }

 

 

 

 

 

 

 

참고 자료

 

 

Skeleton 애니메이션 변경, pr&issue 템플릿 변경, 글 수정 및 다중선택 컴포넌트 관련 버그 해결 by iny

 

PureCSS로 Skeleton UI 제작하기