[CSS] @keyframes 애니메이션 구현

1. @keyframes

 

 

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

 

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

 

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

 

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

 

1 2 3 4 5 6 7 8

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

cs

 

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

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

 

1 2 3 4 5 6 7 8

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

cs

 

위와 같이 말이죠.

 

 

 

 

 

 

 

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 태그에 사라지는 애니메이션을 준다면 아래 코드와 같을 것입니다.

 

1 2 3 4 5 6 7 8

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

cs

 

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

 

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

 

1 2 3

.memo {   animation: fadeOut 4s 1s infinite linear alternate; } Colored by Color Scripter

cs

 

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

 

 

 

 

 

3. Vendor Prefixes

 

 

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

 

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

 

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

 

1 2 3 4 5 6 7

.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; } Colored by Color Scripter

cs

 

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

 

1 2 3 4 5

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

cs

 

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

 

 

 

 

 

 

4. 예제

 

 

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

codepen.io

 

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

 

1 2 3

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

cs

 

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

 

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

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

.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;   }  } Colored by Color Scripter

cs

 

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

 

 

 

여기까지...

 

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

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

 

감사합니다.