소개

keyframes를 사용한 css에서의 애니메이션은 gif 이미지의 삽입과 비교하면 읽기 속도도 빠르고, 성능도 좋고, 움직임도 부드럽습니다.

gif처럼 어떤 애니메이션으로도 표현할 수있는 것은 아니지만,

1. 출현 시에만 강조된 애니메이션이 표시된다
2. 이후 다른 애니메이션이 반복적으로 표시됩니다.

같은 커스터마이즈가 가능하므로, 그 구현 방법을 소개합니다.

샘플

상당히 거칠지만 이런 이미지입니다.



코드는 JSFiddle 로 공개하고 있으므로, 실제의 동작도 이쪽에서 확인해 주세요.

코드 설명

어느 정도 커스터마이즈 할 수있는 것이 편리하다고 생각하기 때문에, 가볍게 설명합니다.

html

main.html

<div class="container container-open">
  <span class="elem-open-1 elem-common">N</span>
  <span class="elem-open-2 elem-common">E</span>
  <span class="elem-open-3 elem-common">W</span>
</div>

html은 위와 같습니다. N, E, W 의 3 문자의 움직임을 조금씩 어긋나기 위해서, 다른 class를 붙입니다.

회전하여 표시

main.css

@keyframes open-container-anim {
  0% { 
    transform: scale(0) rotate(-90deg);
  }
  60% {
    transform: scale(0) rotate(-90deg);
  }
  100% { 
    transform: scale(1) rotate(0deg);
  }
}

.container-open {
  animation: open-container-anim 600ms alternate;
}

우선은, 회전시키면서 크게 합니다.
keyframes 로 변환 을 지정해, 크게 하면서 한편, 90° 회전시켜 전체를 표시시킵니다.

표시 타이밍만 NEW의 문자를 강조한다

@keyframes open-elem-anim {
  0% { 
    bottom: 0;
    color: red;
    transform: scale(1);
  }

  60% {
    bottom: 5px;
    color: yellow;
    transform: scale(1.2);
  }

  100% { 
    bottom: 0;
    color: red;
    transform: scale(1);
  }
}

.elem-open-1 {
  animation: open-elem-anim 600ms alternate 400ms forwards;
}

.elem-open-2 {
  animation: 
    open-elem-anim 600ms alternate 500ms forwards;
}

.elem-open-3 {
 animation: 
    open-elem-anim 600ms alternate 600ms forwards;
}

container가 표시될 때까지 600ms로 했으므로 대략 회전이 끝날 정도부터 강조 애니메이션을 시작합니다. 각각의 요소에 400ms, 500ms, 600ms의 delay를 걸고 있기 때문에 왼쪽 문자부터 순서대로 크게 강조됩니다.

표시 타이밍의 애니메이션이 끝나면 다음 애니메이션을 루프 실행시킨다

@keyframes idle-anim {
  0% {
    bottom: 0;
    color: red;
  }

  50% {
    bottom: 0px;
    color: red;
  }

  100% {
    bottom: 3px;
    color: orange;
  }
}

.elem-open-1 {
  animation: 
    open-elem-anim 600ms alternate 400ms forwards,
    idle-anim 600ms infinite 1200ms alternate;
}

.elem-open-2 {
  animation: 
    open-elem-anim 600ms alternate 500ms forwards,
    idle-anim 600ms infinite 1400ms alternate;
}

.elem-open-3 {
 animation: 
    open-elem-anim 600ms alternate 600ms forwards,
    idle-anim 600ms infinite 1600ms alternate;
}

방금 강조한 애니메이션( open-elem-anim )이 끝난 후 다른 애니메이션( idle-anim )을 반복합니다.

이전 애니메이션에 forward를 지정한 다음 다른 애니메이션으로 연결할 수 있습니다. 또, idle-anim 에는 infinite 를 지정하고 있으므로 루프해 이 애니메이션이 표시되는 치수입니다.

꼭 커스터마이즈 해 사용해 보세요!

참고

【CSS3】@keyframes와 animation 관련 정리

animation - CSS3 참조

transform - CSS3 참조