스타일시트로 애니메이션 효과를 낼 수 있어요 CSS Animation

안녕하세요 키다리디자이너입니다.

오늘은 jQuery나 자바스크립트 등을 이용하지 않고 CSS만으로도 간단한 애니메이션 기능을 구현할 수 있는 방법을 소개해 드리겠습니다.

CSS3의 transition을 이용하면 지정된 시간과 속도로 단순히 CSS의 속성을 부드럽게 전환할 수 있는데요, animation은 이것보다 더 구체적이고 다양한 애니메이션 효과를 낼 수 있으니 잘만 사용하면 코딩할 때 개발자에게 아쉬운 소리 할 일도 적어지겠죠?

 

기본 규칙
CSS애니메이션은 ‘@keyframes 애니메이션이름(식별자)’를 사용하여 애니메이션이 수행되는 동안 정해진 지점에 속성을 줍니다. 그리고 'keyframes'식별자는 해당되는 CSS속성에 직접 영향을 미칩니다.
더 쉽게 말하자면 애니메이션이 10초간 재생되면 1초, 3초 ,7초 각각 나뉘어 각 초마다 정해진 값을 html내에 클래스나 id에 전달하여 CSS속성을 변경해 줄 수 있다는 뜻입니다.

플래시 애니메이션을 만들 때 프레임에 키프레임을 찍고 움직임을 주는 것처럼요.

 

그러나 실제로 시간단위로 끊어서 속성을 주는 것은 불가능하고 처음과 끝, 혹은 %로 지정해야 합니다.

잘 이해가 안되시나요? 하지만 이 글을 끝까지 읽고 예제 사이트를 보신다면 충분히 이해가 되실거라 생각합니다.
아래는 기본적인 코딩 방법입니다.

 

@keyframes 애니메이션이름 {
    from {opacity:0;}
    to {opacity:1;}
}

.클래스명 {animation:애니메이션이름 3s infinite;}

 

위 코드를 설명해 드리면 @keyframes에서 애니메이션을 시작할 때 투명도를0으로 시작하고 끝날때는 1로 끝나도록 지정했습니다.
이후 실제로 화면에 띄워질 클래스에서 애니메이션이름이 동일한 'keyframes' 내용을 불러와 클래스 내에 정의한 내용으로 재생됩니다. 위 코딩대로라면 3초동안 사라졌다가(투명도0) 나타나는(투명도1) 애니메이션이 무한반복됩니다.

  

 

 

브라우저별 사용 방법

CSS내에서 각 브라우저별 애니메이션 스타일 지정 방법(vendor prefixes)은 다음과 같습니다.

#TEST {
    -webkit-animation: 애니메이션이름 3s infinite;
    -moz-animation: 애니메이션이름 3s infinite;
    -o-animation: 애니메이션이름 3s infinite;
    animation: 애니메이션이름 3s infinite;
}

 

키프레임은 처음과 끝을 뜻하는 from, to를 사용할 수도 있고 애니메이션의 중간지점을 %로 지정할 수도 있습니다.

@keyframes 애니메이션이름 {
    0% {opacity:0;}
    25% {opacity:0.25;}
    50% {opacity:0.5;}
    75% {opacity:0.75;}
    100% {opacity:1;}
}

이렇게 하면 애니메이션 재생 시간 중 해당되는 %구간에 지정된 속성을 적용합니다.

 

 

animation의 속성들

CSS의 animation에 대한 자세한 속성은 아래와 같습니다.

- animation-delay : 애니메이션 종료 후 다시 시작될 때까지의 공백시간을 지정합니다. 반드시 ‘s’를 이용해서 초단위로 지정해야합니다. (1s는 1초)

- animation-direction : 애니메이션을 재생하는 방향을 지정합니다. 기본값인 ‘normal’은 정상적인 재생을 하고 ‘reverse’는 거꾸로 재생합니다. ‘alternate’와 ‘alternate-reverse’는 반복재생일 때 그것을 번갈아가며 재생하게 됩니다.

- animation-fill-mode : 이 속성의 기본값인 ‘none’은 애니메이션이 종료된 후에는 재생되기 전 맨 처음 상태로 돌아가게 됩니다. 그러나 ‘forwards’로 지정하면 종료된 후 상태로 남아있게 됩니다.

- animation-iteration-count : 애니메이션 반복 횟수를 지정합니다. ‘infinite’으로 지정하면 무한반복됩니다.

- animation-play-state : 애니메이션을 일시 중지하거나 일시 중지된 애니메이션을 다시 재생합니다. ‘paused’로 중지, ‘running’으로 재생을 지정합니다.

- animation-timing-function: 애니메이션이 재생되는 동안 일정한 효과를 지정합니다. 예를 들어 초반에 빠르게 움직이다 후반에 느려지는 easing효과등을 사용합니다.
    1. ease : 시작과 끝을 부드럽게 합니다.
    2. linear : 속도의 변화는 없습니다.
    3. ease-in : 시작할 때 천천히 재생됩니다.
    4. ease-out : 종료될 때 천천히 재생됩니다.
    5. ease-in-out : 천천히 시작되고 천천히 종료됩니다.
    6. cubic-bezier(x1,y1,x2,y2) : 3차원 배지어 곡선을 따라 움직입니다. 이것에 대해서는 제가 여기에 설명하기 좀 벅차니 직접 찾아보시거나 나중에 여유가 되면 따로 기술하겠습니다.. ㅠ

 

아래는 예시입니다.

#TEST {
    animation-name: bounce;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
    animation-timing-function: linear;
    animation-fill-mode: none;
    animation-delay: 5s;
}

 

 

CSS스타일로 응용하기
animation의 효과로써 @keyframe 안에 레이어의 위치값을 지정하는 속성을 사용하여 위치값을 변경하거나 회전 등을 시킬 수 있습니다.

@keyframes 애니메이션이름 {
    from { transform: scaleX(1); }
    to { transform: scaleX(2); }
}

CSS3에서는 transform스타일에 다양한 속성을 지원하니 직접 테스트 해보시길 바랍니다.

 

 

예제

아래에는 몇가지 예제 소스들을 링크해 두었습니다.
몇 번 훑어 보시면 쉽게 사용하실 수 있을 것 같습니다.

 

배경 컬러 변경
http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation1
http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation2

 

상하 좌우로 움직이며 배경 컬러 변경
http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation3
http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation4
http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation5

 

마우스커서가 올라갔을때 투명도 설정

http://samples.msdn.microsoft.com/Workshop/samples/css/transforms_transitions_animations/animation2.html

 

 

더 자세한 사항은 아래 사이트를 참조하시길 바랍니다.

http://www.w3.org/TR/css3-animations/