css3 animation

css3 애니메이션 소개

 

css3에 추가된 기능 중에 가장 멋진 기능이 애니메이션이다.

css3는 frame 기반의 애니메이션을 제공하는데 크기, 형태, 위치, 회전 등 css가 제공하는 거의 모든 요소에 대해 시간과 방향 등을 지정해 애니메이션을 만들 수 있다. 특히 javascript나 jQuery 같은 라이브러리 없이도 멋진 애니메이션을 만들 수 있다. 이것을 keyframme 애니메이션이라고 한다.

keyframe 애니메이션은 시간을 기반으로 시작프레임(0%)부터 종료프레임(100%)까지 지정해준 css의 속성을 자연스럽게 변화시켜가는 방식으로 작동한다.

● keyframe 애니메이션 기본 문법

myfirst css3 animation        IE 9 이하 버전이나 아주 오래된 다른 브라우저가 아니라면 위 예제는 위 아래로 반복해서 움직이는 텍스트 애니메이션을 보여준다. 예제에서 css3 애니메이션의 기본적인 구조를 살펴보면 다음과 같다. 

@keyframes 는 애니메이션을 저장하는 틀이다. @keyframes myfirstanimation { } 처럼 @keyframes 옆에 키프레임, 즉 애니메이션의 이름을 입력하고 {} 안에 프레임별 애니메이션을 설정하면 된다. 이것은 마치 플래시에서 프레임셋 기반의 애니메이션을 만드는 것과 비슷하다.   from { }, to { }는 애니메이션이 시작할 때의 css 속성과 끝날 때의 속성을 정해주는 부분이다. 이것은 0% { }, 100% {} 와 같다. 예를 들어 어떤 구성요소의 넓이를 100px 에서 시작해 500px 까지 정해진 시간 내에 연속적으로 커지게 하고자 한다면 아래와 같이 하면 된다. 

이것은 아래와 같이 0%, 100%로 표시해도 같은 동작을 한다. 

  예제속의 키프레임 애니메이션 설정을 살펴보자. 

이 코드는 구성요소의 위쪽 바깥 여백(마진)을 0에서 시작해서 100px가 될때까지 애니메이션이 수행되도록 설정한다. 애니메이션을 설계하기에 따라 마진뿐만 아니라 크기, 컬러, 회전 등등의 속성에 변화를 줄 수 있다. 

이 코드는 어떤 객체에 어떤 애니메이션(키프레임세트)을 할달할 지, 애니메이션의 지속시간은 얼마나 할 지, 계속 반복할 것인지, 100%에 도달했을 때 다시 반대로 애니메이션이 진행되도록 할 지 등등의 애니메이션 속성을 지정한다.

위 설정을 보면  h1 태그에 키프레임 애니메이션 myfirstkeyframe을 지정해주었다. 그리고 2s는 애니메이션이 2초동안 진행되라고 지정한 것이고, infinite는 계속해서(무한대로) 반복하도록 하는 속성이고, alternate는 애니메이션이 100%에 도달했을 때 바로 0%, 즉 처음의 자리로 돌아가는 것이 아니고 반대로 애니메이션이 되도록 하는 설정이다.  

# animation 속성 지정

위에서 한 줄로 animation: 오른쪽에 공백을 구분으로 이어 쓴 내용들이 애니메이션의 속성이다. 기본적으로 아래와 같이 사용한다. 

예를 들어 다음과 같이 지정할 수 있다.

이 코드는 myfirstanimation 키프레임셋을 3초간(3s) 재생하는데 2초간(2s) 지연한 후에 재생한다. 이를 세 번 반복하며(3) 애니메이션이 가속도 없이 고르게 시간분배되며(linear) 끝으로 가면 다시 반대방향으로 거꾸로 애니메이션이 재생되고(alternate) 끝나면 마지막 프레임의 css 설정대로 모양을 정한다(forwards). running은 애니메이션을 재생상태로 설정한다.  사실 위 코드에서 running 같은 속성은 기본값이므로 생략해도 된다. 대신 pause로 해두면 애니메이션이 재생되지 않는다.  위와 같이 한 줄로 줄여 쓰는 것을 Shorthand라 하는데 속성값들의 순서는 어떻게 해도 상관은 없다. 다만 애니메이션 재생 시간과 지연시간을 같이 쓸 때는 반드시 재생시간, 지연시간, 반복회수 순으로 해야 한다.  애니메이션 속성은 한 줄로 쓸 수도 있지만 아래와 같이 각각의 속성과 값을 지정할 수도 있다. 

 

# animation 속성과 값들

• animation-name

키프레임 애니메이션 이름을 지정함. 이 이름이 지정되지 않았거나 지정되었더라도 해당 키프레임 애니메이션이 없으면 애니메이션도 실행되지 않는다.

예) animation-name: myfirstanimation;

• animation-duration

애니메이션 재생시간이다. 초 단위의 숫자로 정해주며 끝에 s를 붙여준다.

예) animation-duration: 3s;

• animation-timing-function

애니메이션의 스피드 곡선을 지정한다. 기본 값은 ease이다. 

linear :  시작부터 끝까지의 속도가 일정함
ease : 천천히 시작해서 점점 빨라지다가 천천히 종료됨(기본 값)
ease-in : 천천히 시작함 
ease-out : 천천히 끝남
ease-in-out : 천천히 시작하고 천천히 끝남(ease와 비슷)

예) animation-timing-function: linear; /* 애니메이션 재생 속도가 균일함 */

• animation-delay

애니메이션이 시작하기 전에 잠깐 기다리는 시간을 초단위로 지정한다. 숫자 뒤에 s를 붙인다. 

예) animation-delay: 2s; /* 2초 후에 재생 */

• animation-iteration-count

애니메이션의 반복 횟수를 지정한다. 지정하지 않으면 기본적으로 1이 되어 한 번만 재생한다. 

숫자 : 지정해 준 숫자만큼 반복한다. 
infinite : 계속해서 반복한다. 

예) animation-iteration-count: 3; /* 3회 반복 */

• animation-direction

애니메이션 재생을 반대로 할 지 아니면 정상재생했다가 반대로 재생할 지 등에 대한 설정이다. 

• normal : 정상재생한다. 기본 값이며 별도로 입력하여 지정하 않아도 된다. 
• reverse : 애니메이션을 거꾸로 재생한다. 
• alternate : 정상재생 했다가 거꾸로 재생한다. 
• alternate-reverse : 거꾸로 재생했다가 정상 재생한다. 

예) animation-direction: alternate; /* 정상재생 후 거꾸로 재생 */

• animation-fill-mode

이 속성은 애니메이션이 재생중이지 않을 때 어떤 스타일을 적용할 것인지 정한다. 

• none : 속성을 지정하지 않으면 기본 값으로 적용되며 어떤 영향도 미치지 않는다. 
• forwards : 애니메이션이 끝났을 때 마지막에 적용된 속성을 적용한다. 
• backwards : 애니메이션 방향이 반대일 때 시작프레임의 속성을 적용한다. 
• both : 애니메이션의 방향에 따라 forwards, backwards 두 가지를 모두 적용한다. 

• animation-play-state

애니메이션의 재생 상태를 설정한다. paused와 running 두 값을 가진다. 

• paused : 애니메이션이 정지되어 있다. 
• running : 애니메이션을 재상한다. 기본 값으로 지정하지 않아도 된다. 

 

● vendor prefix

위 첫 번째 예제에서 보면 똑같은 애니메이션 설정을 각각 앞에 -webkit-, -moz-, -o-를 붙인 코드들이 추가되어 있는 것을 볼 수 있다. 이것들을 vendor prefix라고 한다. 말 그대로 해석하면 공급자 접두어라고 할 수 있을 것이다. 브라우저들마다 css를 지원하면서 표준으로 그냥 지원하지 않고 브라우저별 접두어를 붙이게 한 경우가 있는데 이는 브라우저와 버전에 따라 다르다.  -webkit-은 같은 브라우저 엔진을 사용하는 Chrome, Safari, Opera에 사용되고, -moz-는 Mozilla 재단의 Firefox에 사용된다. 또 이전 버전의 Opera 브라우저는 -o-를 사용한다. 각 접두어별 브라우저 지원을 보면 다음과 같다. 

-webkit-  Chrome 4.0 부터, Safari 4.0 부터, Opera 15.0 부터

-moz-  Firefox 5.0 부터 16.0 전 버전까지(16.0부터는 필요 없음)

-0-  Opera 12.0

없음  IE 10 부터, Firefox 16.0 부터 표준으로 접두어 없이 사용

모든 vendor prefix를 다 써주어야 할까?

만일 대부분의 브라우저를 최신 버전으로 유지하는 사용자들을 주 타겟으로 한다면 -webkit-과 표준(standard : prefix 없는) 만 사용하면 될 것이다. Chrome나 Firefox는 대부분 자동 업그레이드 설정이 되어 있어 대부분 최신 버전으로 유지되는 편이다. IE는 최신 Windows 8 이상의 OS를 사용하는 경우는 IE 10 이상이 기본 제공되므로 prefix 없이 표준으로 애니메이션을 지원한다. 따라서 Chrome, Safari, opera를 위한 -webkit-과 prefix 없는 표준 코드를 사용하면 될 것이다. 전적으로 이것은 사이트의 목표관중의 접속 환경을 고려하여 결정해야 할 문제이다.   

● frame 세분화 하기

위에서 애니메이션의 시작을 from { }, 끝을 to { }로 하였고 이는 0% { }, 100% { }와 같다는 점을 설명하였다. css3 애니메이션은 0%와 100% 사이에 프레임을 더 쪼개서 세분화할 수 있는데 0%, 10%, 20%,… 100%와 같이 하여 각각의 단계별로 css 속성을 바꿔주면서 자연스러운 변화를 줄 수 있다. 프레임을 세분화하여 위의 예제를 바꿔보자. 예를 들어 절반(50%)을 기준으로 글자의 색을 빨간색으로 설정해보자. 

myfirst css3 animation
 

Share the joy
  •  
  •  
  •  
  •  

댓글 남기기