CSS 애니메이션 만들기 개요
제가 생각하기로는 애니메이션에는 크게 볼 때 두 가지 속성이 필요합니다. '시간'과 '상태'입니다. 어떤 개체가 시간이 지남에 따라 어떤 상태를 정해주면 그것이 움직임이 되고 애니메이션이 됩니다. 그리고 이것을 CSS로 코딩하여 만들어준다면, CSS에서는 크게 시간 속성과 상태 속성이 필요할 것입니다.
그런데 이 중 시간과 관련된 속성들은 애니메이션에서 고유적으로 사용되기는 하지만, 상태와 관련된 속성들은 사실 애니메이션이 아니더라도 이미 정적인 상태에서도 사용하고 있습니다. border, font-size, color, width, height 등등... 요소들을 디자인하기 위해 사용했던 모든 속성들이 다 그 요소의 상태를 나타냅니다.
width, height이 50px 인 어떤 요소가 있다고 생각해봅시다. 시간이 0초에서 1초가 흐를때까지 이 요소의 width, height이 각각 100px로 서서히 변한다면 어떨까요? 이것이 CSS에서 말하는 애니메이션입니다.
또 이런 생각을 해볼 수 있습니다. width, height 값이 시간이 지남에 따라 일정한 변화율을 가지고 변할 수도 있으나, 각 시간에 따라 변화율을 다르게 하고 싶을 수도 있습니다. 전자의 경우 0초에서 1초가 될 때까지 width, height 값이 일정한 속도로 변하는 경우를 의미합니다. 후자의 경우는 무수히 많은 경우가 있을 수 있습니다. 예를 들면 0초에 가까울 때에는 엄청나게 빠른 속도로 값이 변하다가 1초에 가까워질수록 점점 값이 변하는 속도가 느리거나, 혹은 그 반대일 수도 있습니다. CSS에서는 이렇게 시간에 따라 상태가 변하는 속도를 조절할 수 있는 time-function을 사용할 수 있습니다.
이번 포스팅에서는 이런 것들을 모두 종합하여, 시간이 지남에 따라 원하는대로 상태들을 변화시키는 멋진 애니메이션을 만들 수 있는 방법을 익힐 것입니다.
변화 시간을 정하는 transition 속성
transition은 CSS속성 값의 변화를 즉시 이루어지는 것이 아닌, 시간을 두고 서서히 이루어지게 하여 시각적으로 부드럽게 변하는 것처럼 보이게 만들어주는 속성입니다.
1. transition의 사용법
transition: (적용할 CSS 속성) 변화 시간 [timing function]
1) 적용할 CSS 속성
transition을 적용할 속성을 적습니다. 모든 속성에 적용하고 싶으면 all이라고 씁니다.
복수개의 속성에 적용하는 방법은 transition에 값을 넣지 않고 transition-property라는 속성을 따로 만들어 거기에 속성값으로 적용할 속성들을 넣습니다. 이때 각 속성은 띄어쓰기로 구분합니다.
* 예시코드
/* width속성에만 변환시간 적용하기 */
transition: width 1s;
/* 모든 속성에 대해 변환시간 적용하기 */
transition: all 1s;
/* 복수에 속성에 대해 변환시간 적용하기 */
transition: 1s;
transition-property: width height;
2) 변화 시간
필수로 넣어야 하는 값이며 단위는 s(second)나 ms(millisecond)를 사용합니다.
이 시간만큼 속성의 값의 변화가 이루어집니다.
각 속성별로 따로따로 지정할 수도 있습니다.
* 예시 코드
transition: all 2s;
transition: all 2000ms;
/* 각 속성마다 따로 지정 */
transition: width 2s, height 0.5s;
3) timing function
timing function은 시간에 따라 상태가 변하는 변화율을 함수로 작성하여 시간에 따른 변화 속도를 조절할 수 있습니다.
transition-timing-function속성으로 따로 작성하거나, transition에서 적용 속성과 변환시간 뒤에 연달아적는 방법이 있습니다.
timing function은 사실 자주 사용하는 함수 몇 가지를 기본적으로 사용할 수 있도록 CSS에서 제공하고 있습니다. 속성 값에 함수명을 넣어서 사용할 수 있습니다. 종류로는 linear, ease-in, ease-out, ease-in-out가 있습니다.
반면 cubic-bezier(n, n, n, n)를 이용하면 간단하게 내 입맛대로 timing function을 만들어 사용할 수 있습니다.
저 네 군데에 n자리에 숫자만 넣으면 됩니다. 그런데 어떤 숫자를 넣어야 어떤 효과가 나올지 알기가 힘듭니다. 그래서 내가 원하는 효과를 나타내는 n값을 쉽게 찾을 수 있는 사이트도 하나 소개합니다.
cubic-bezier() 만들기
cubic-bezier.com
cubic-bezier.com
* 예시 코드
/* 내장된 timing function 사용 */
transition: all 1s ease-in-out;
/* cubic-bezier() 사용 */
transition: all 1s cubic-bezier(0.8, 0.2, 0.9, 0.5);
/* 따로 쓰기 */
transition: all 1s;
transition-timing-function: cubic-bezier(0.8, 0.2, 0.9, 0.5);
4) 그 외 속성 delay
transition-delay의 값으로 시간 값(ms나 s단위)을 주면 그 시간만큼 딜레이를 가진 뒤에 비로소 애니메이션이 작동합니다.
2. 연습
지금까지 공부한 걸 연습하며 정리해봤습니다.
CSS 코드를 보면서 결과를 예상해본 후 결과창에 있는 박스들을 클릭해보세요. 그리고 생각한 대로 효과가 적용이 되는지 확인하면 될 것 같습니다.
See the Pen https://codepen.io/cocoder16/pen/VwLGWWd">
VwLGWWd by cocoder16 (https://codepen.io/cocoder16">@cocoder16)
on https://codepen.io">CodePen.
그런데 지금까지 살펴본 transition만 가지고는 뭔가 부족한 느낌이 있습니다. 조금 더 다양한 변화 방식이 있지 않을까요?
예를 들어 위 연습 예제에서는 박스가 오른쪽 아래 방향으로만 커지는데, 다른 방향으로 커지게 할 수는 없을까요? 이런 것들을 할 수 있는 방법이 있습니다.
transform으로 더 풍부한 애니메이션 만들기
transform은 요소를 시각적으로 다양한 방법으로 변형시킬 수 있는 속성입니다.
이 속성은 block이나 inline-block element에게만 적용됩니다. inline element에는 적용되지 않습니다.
transform으로 변형 효과를 사용할 때에는 변형의 기준점과 변형 시간을 같이 정해줄 수 있습니다.
transition만 적용한 애니메이션과 달리 transform까지 적용된 애니메이션은 더 다양한 표현 방식을 가지게 됩니다.
1. transform-origin으로 기준점 정하기
요소의 기준점의 default는 정중앙입니다. 따라서 해당 속성을 사용하지 않으면 정중앙을 기준으로 하여 변형이 일어납니다. 기준점이라 함은 마치 그 점을 핀셋으로 콱 집어 고정시키고 그것을 기준으로 전체 모양의 변형이 이뤄지는 것과 같은 느낌입니다. 잘 이해가 안 가셔도 상관없습니다. 밑에서 예제를 보면 직관적으로 이해를 할 수 있을 것입니다. transform-origin의 값을 넣는 방법은 두 가지가 있습니다.
1) 자주 사용하는 9군데 값 넣기
top, center, bottom, left, right를 조합하여 9군데의 기준점을 정할 수 있습니다.
* 예시 코드
transform-origin: top left;
transform-origin: top center;
transform-origin: top right;
transform-origin: center left;
transform-origin: center center;
transform-origin: center right;
transform-origin: bottom left;
transform-origin: bottom center;
transform-origin: bottom right;
2) 숫자 값으로 넣기
값으로 x축 방향으로 이동 값 y축 방향으로 이동값 [z축 방향으로 이동 값]을 차례대로 적어주면 됩니다.
* 예시 코드
/* top right */
transform-origin: 100% 0;
/* center center */
transform-origin: 50% 50%;
/* left bottom */
transform-origin: 0 100%;
2. 변형시간
변형시간은 transition 속성을 사용해줍니다. 변형이 즉시 일어나는 것보다 시간에 걸쳐 일어나는 것이 더 시각적으로 생동감 있어 보입니다.
transition과 transform-origin을 같이 사용할 때 주의할 점은 transition값으로 all을 사용하지 말고 transform을 사용해야만 transform-origin이 잘 적용된다는 것입니다. 만약 그렇지 않으면 변환이 다 완료가 되고 나서야 transform-origin이 적용됩니다.
3. transform 효과
주로 크기를 변형하는 scale, 회전을 시키는 rotate, 기울게 만드는 skew, 이동시키는 translate 등을 사용합니다.
* 예시 코드 및 결과
See the Pen https://codepen.io/cocoder16/pen/RwPYyVb">
RwPYyVb by cocoder16 (https://codepen.io/cocoder16">@cocoder16)
on https://codepen.io">CodePen.
박스에 마우스를 올리면 transform효과가 나타납니다. 코드를 같이 보면서 감을 잡으시면 될 것 같습니다.
키프레임으로 애니메이션 함수 만들기
위의 transition과 trasform을 가지고 우리는 충분히 원하는 애니메이션들을 만들어 낼 수 있습니다.
그런데 사실 이것만 가지고는 뭔가 아쉬움이 남습니다. 자주 사용하는 애니메이션은 함수로 만들어서 계속 재사용하면 안 될까요?
@keyframes 정의하기
@keyframes는 프레임이 변함에 따라 CSS속성이 어떤 값을 가지는지를 정할 수 있습니다. 주의하셔야 합니다. 위에서 transition은 시간이 변함에 따라 CSS속성의 값이 변하는 것이었습니다. 다른 것입니다. 즉, @keyframes 자체만으로는 아직 시간이 적용되지 않은 상태인 것입니다. 따라서 @keyframes를 가져다 쓸 때에는 여기에 애니메이션 시간까지 추가로 지정해줘야 합니다.
* 예시 코드
@keyframes slidein {
from {
margin-left: 100%;
}
to {
margin-left: 0%;
}
}
오른쪽에서 왼쪽 방향으로 들어오는 slidein이라는 애니메이션을 만들었습니다. from은 첫 프레임에서의 상태를 나타내고 to는 마지막 프레임에서의 상태를 나타냅니다. 더 구체적으로 %를 이용하여 프레임을 더 세분화할 수 있습니다.
* 예시 코드
@keyframes slidein {
0% { margin-left: 100%; }
30% { margin-left: 70%; }
70% { margin-left: 30%; }
100% { margin-left: 0%; }
}
정의한 @keyframes 사용하여 애니메이션 만들기
@keyframes를 사용하려면 animation-name 속성을 사용하면 됩니다.
애니메이션 실행시간은 animation-duration 속성을 사용하면 되고 단위로는 s나 ms를 사용할 수 있습니다.
키프레임 방식을 사용하더라도 timing-function을 적용할 수 있습니다. 이것은 animation-timing-function 속성을 사용하면 됩니다. 이 속성의 값으로는 위에 transition-timing-function을 쓴 것과 동일한 사용법을 가집니다.
* 예시 코드
div {
animation-name: slidein;
animation-duration: 1s;
animation-timing-function: ease-in;
}
이 외에 사용할 수 있는 다양한 애니메이션 속성들이 또 있습니다.
- animation-iteration-count: 애니메이션의 반복 횟수를 지정합니다. (default = 1)
- animation-direction: 애니메이션의 반복 회수를 설정한 후 이 속성의 값을 설정해야 의미가 있습니다.
default는 정방향의 애니메이션 실행을 의미하여, 매 애니메이션 반복마다 정방향의 애니메이션을 실행합니다.
값으로 alternate를 넣으면 홀수번째 반복에서는 정방향의 애니메이션이 실행되고, 짝수번째 반복에서는 역방향의 애니메이션이 실행됩니다. 예를 들어 정방향 애니메이션에서 왼쪽에서 오른쪽으로 이동한다면 역방향에서는 오른쪽에서 왼쪽으로 이동합니다.
- animation-delay: 값으로 지정한 딜레이 시간이 지난 후 애니메이션이 시작됩니다.
- animation-fill-mode: 값으로 backwards를 넣으면 애니메이션이 끝난 후 요소가 원래 위치로 돌아갑니다. forwards를 넣으면 애니메이션이 끝난 후 끝난 위치에 요소가 남습니다. default는 backwards입니다.
- animation-play-state: 값으로 running을 넣어주면 애니메이션이 진행상태가 되고, paused를 넣으면 애니메이션이 일시중지 상태가 됩니다.
* 예시 코드 및 결과
See the Pen YzNoJEz by cocoder16 (@cocoder16) on CodePen.
최근댓글