CSS 애니메이션 구현 - @keyframes 와 animation 속성을 이용하여

안녕하세요, 프로독학러 입니다.

이번 포스팅에서는 CSS 애니메이션과 @keyframes 에 대해서 알아보도록 하겠습니다.

1. @keyframes

@keyframes 는 CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정하는 문법입니다.

@keyframes 를 사용하기 위해선 세 가지가 필요합니다.

• animation-name : 사용자가 직접 지정한 이름, @keyframes 가 적용될 애니메이션의 이름
• 스테이지 : from - to 로 0~100% 의 구간
• CSS 스타일 : 각 스테이지(구간)에 적용시킬 스타일

코드를 통해 살펴보도록 하겠습니다.

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

위의 CSS 코드는 애니메이션 명이 fadeOut 인 애니메이션에 0% 일 때 스타일을 opacity 를 1로 지정하고, 100% 일 때는 0 으로 지정하는 키프레임입니다.

위의 코드에서는 스테이지를 % 로 지정했지만, from to 를 이용해도 같습니다.

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

위와 같이 말이죠.

2. Animation

animation 속성은 애니메이션에 이름을 지정하거나 지속시간, 속도 조절 등을 지정할 수 있는 속성을 가지고 있습니다.

아래는 애니메이션 속성의 종류입니다.

• animation-name : @keyframes 이름 (예제에서는 fadeOut 을 사용)
• animation-duratuion : 타임 프레임의 길이, 키프레임이 동작하는 시간을 설정할 때 사용
• animation-timing-function : 애니메이션 속도 조절 / 그래프 ( linear / ease / ease-in / ease-out / ease-in-out / cubic-bezier )
• animation-delay : 애니메이션을 시작하기 전 지연시간 설정
• animation-iteration-count : 반복 횟수 지정
• animation-direction : 반복 방향 설정 ( 정방향 / 역방향 / 번갈아가며)
• animation-fill-mode : 애니메이션 시작 / 끝 상태 제어 ( none / forwords / backwords / both )

예를 들어 class 명이 memo 인 HTML 태그에 사라지는 애니메이션을 준다면 아래 코드와 같을 것입니다.

.memo {
  animation-name: fadeOut;
  animation-duration: 4s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}

class 명이 memo 인 HTML 태그는 1초의 지연시간 후 4초 동안 사라졌다가 4초 동안 나타났다가를 반복하는, 즉 무한으로 깜빡이는 효과를 만들 것입니다.

위의 예제 코드를 animation 속성으로 짧게 줄일 수도 있습니다.

.memo {
  animation: fadeOut 4s 1s infinite linear alternate;
}

위의 두 코드는 똑같이 동작하는 같은 코드입니다.

3. Vendor Prefixes

크로스 브라우징 이슈를 해결하기 위해 접두사를 붙여줍니다.

• 크롬&사파리 : -webkit-
• 파이어폭스 : -moz-
• 오페라 : -o-
• 인터넷 익스플로러 : -ms-

애니메이션 속성을 벤더 프리픽스와 함께 사용하면 다음과 같습니다.

.memo {
    -webkit-animation: fadeOut 4s 1s infinite linear alternate;
    -moz-animation: fadeOut 4s 1s infinite linear alternate;
    -ms-animation: fadeOut 4s 1s infinite linear alternate;
    -o-animation: fadeOut 4s 1s infinite linear alternate;
    animation: fadeOut 4s 1s infinite linear alternate;
}

@keyframes 앞에도 벤더 프리픽스를 적용해 줍니다.

@-webkit-keyframes fadeOut { /* your style */ }
@-moz-keyframes fadeOut { /* your style */ }
@-ms-keyframes fadeOut { /* your style */ }
@-o-keyframes fadeOut { /* your style */ }
@keyframes fadeOut { /* your style */ }

크로스 브라우징 이슈를 해결하기 위해 벤더 프리픽스를 사용하는것을 추천드립니다.

4. 예제

codepen 에서 예제를 실행시켜 보겠습니다.

codepen.io

create - new pen 으로 들어가서 HTML 에 다음과 같이 입력합니다.

<div class="memo">
  Memo
</div>

class 명이 memo 인 div 태그 안에 Memo 라는 글씨를 적었습니다.

그리고 CSS 부분에 다음과 같이 입력합니다.

.memo {
    -webkit-animation: fadeOut 4s 1s infinite linear alternate;
    -moz-animation: fadeOut 4s 1s infinite linear alternate;
    -ms-animation: fadeOut 4s 1s infinite linear alternate;
    -o-animation: fadeOut 4s 1s infinite linear alternate;
    animation: fadeOut 4s 1s infinite linear alternate;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes fadeOut {   
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes fadeOut { 
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-ms-keyframes fadeOut {   
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  } 
}
@-o-keyframes fadeOut {   
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {   
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  } 
}

벤더 프리픽스를 적용하여 코드가 길어졌지만, Memo 글자가 깜짝이는 애니메이션을 구현했습니다.

여기까지...

CSS 에서 animation 속성과 @keyframes 속성을 이용하여 애니메이션을 구현하는 방법에 대해서 알아보았습니다.

애니메이션을 적용할 대상을 선택자로 선택하여 animation 속성을 통해 애니메이션이 어떻게 구현될지 정하고, @keyframes 속성을 통해 구간별 스타일을 지정하는 것이라고 정리 할 수 있겠습니다.

감사합니다.

**참고 자료 (항상 감사드립니다)

https://webdesign.tutsplus.com/ko/tutorials/a-beginners-introduction-to-css-animation--cms-21068

*이 포스팅이 도움이 되셨다면 다녀가셨다는 표시로 공감 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)