CSS 애니메이션
CSS를 이용하여 애니메이션을 만드는 방법을 알아보자.
transform
요소에 회전, 크기 조절, 기울기, 위치 등을 동적으로 변경할 수 있다.
translate
요소를 현재 위치에서 지정된 거리만큼 이동시킨다.
transform: translate(10px, 20px); /*오른쪽으로 10px, 아래로 20px 이동 */
transform: translate(-10px, 0); /* 왼쪽으로 10px 이동 */
transform: translateX(20%); /* 요소 너비의 20% 만큼 오른쪽으로 이동 */
transform: translateY(-30px); /* 위로 30px 이동 */translate에서 % 단위는 요소 자신의 크기를 기준으로 이동 거리를 계산한다.
translate를 사용한 정중앙 정렬
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
scale
요소의 크기를 조절한다.
1보다 큰 값은 확대, 1보다 작은 값은 축소이다.
transform: scale(2); /* 가로 세로 2배로 확대 */
transform: scale(0.5); /* 가로 세로 절반 크기로 축소 */
transform: scale(2, 1); /* 가로 2배 확대, 세로 변화 없음 */요소의 내용물(텍스트 등)도 함께 확대/축소하니 주의해야 한다.
rotate
요소를 회전시킨다.
양수는 시계방향, 음수는 반시계 방향으로 회전한다.
transform: rotate(45deg); /* 시계 방향 45도 회전 */
transform: rotate(-90deg); /* 반시계 방향 90도 회전 */
transform: rotate(0.5turn); /* 시계 방향 반바퀴(180도) 회전 */CSS는 각도 단위로 deg(도), rad(라디안), turn(회전) 등을 사용한다.
transform: rotate(45deg);
transform: rotate(3.14159rad); /* 180도 회전 */
transform: rotate(0.5turn); /* 0.5회전, 즉 180도 회전 */skew
요소를 X축이나 Y축을 기준으로 기울인다.
/* X축을 기준으로 30도 기울임 */
transform: skew(30deg);
/* X축을 기준으로 20도, Y축을 기준으로 10도 기울임 */
transform: skew(20deg, 10deg);
/* X축을 기준으로만 45도 기울임 */
transform: skewX(45deg);
/* Y축을 기준으로 -15도 기울임 */
transform: skewY(-15deg);scale과 같이 내용물도 함께 기울어지므로 텍스트의 가독성을 해칠 수 있으니 주의해야 한다.
transform-origin
변형(transform)이 적용되는 기준점을 설정한다.
모든 transform 함수(rotate, scale, skew, translate 등)에 영향을 주며, 기본값은 요소의 중심인 50%, 50%이다.
transform-origin: left top;
transform-origin: 0 0;
transform-origin: 100% 100%;
transform-origin: 50px 50px;
transform-origin: right bottom 10px; /* Z축 추가 */값은 X축과 Y축을 기준으로 지정할 수 있고, 선택적으로 Z축도 지정할 수 있다.
translate vs position
두 속성은 모두 요소를 이동시키는 데 사용될 수 있지만, 성능과 사용 목적에서 중요한 차이가 있다.
- 렌더링 과정의 차이
- Layout (Reflow): 요소의 크기와 위치 계산
- Paint: 색상, 이미지, 테두리 등을 그림
- Composite: 여러 레이어를 합성
position을 변경하면 Layout 단계부터 다시 시작된다.
하지만 transform은 Composite 단계에서만 처리된다.
그렇기 때문에 transform이 성능상 훨씬 빠르고 효율적이다.
- 사용 목적에 따른 권장 속성
- translate 사용 권장하는 경우
애니메이션이나 빈번한 위치 변경이 필요할 때
성능이 중요한 상황 (예: 모바일 환경)
다른 요소의 레이아웃에 영향을 주지 않아야 할 때 - position 사용 권장하는 경우
정적인 레이아웃 구성 시
요소의 위치 변경이 다른 요소의 레이아웃에 영향을 줘야 할 때
복잡한 레이아웃 구조에서 요소를 배치할 때
transition
요소의 속성 값이 변할 때, 그 변화가 일정 시간에 걸쳐 점진적으로 일어나도록 한다.
transition-property
전환 효과를 적용할 CSS 속성을 지정한다.
all, none, 특정 속성 이름(예: width, color)을 입력하며, 여러 속성은 쉼표로 구분하여 나열할 수 있다.
transition-property: width, background-color;transition-duration
transition이 완료되는 데 걸리는 시간을 설정한다.
시간 단위로 초(s) 또는 밀리초(ms)를 사용할 수 있다.
transition-duration: 0.5s; /* 0.5초 */
transition-duration: 200ms; /* 200밀리초 = 0.2초 */transition-timing-function
transition의 진행 속도를 설정한다.
시간 단위로 초(s) 또는 밀리초(ms)를 사용할 수 있다.
transition-timing-function: ease;
transition-timing-function: linear;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: steps(5, end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); /* 시작은 매우 느리고, 끝은 매우 빠름 */
transition-timing-function: steps(5, jump-end); /* 5단계로 점프하며 전환 */- ease: 기본값. 느리게 시작해서 빨라졌다 끝에서 느려짐.
- linear: 일정한 속도로 진행.
- ease-in: 느리게 시작해서 점점 빨라짐.
- ease-out: 빠르게 시작해서 점점 느려짐.
- ease-in-out: 느리게 시작해서 빨라졌다 끝에서 느려짐.
ease와 비슷하지만, 시작과 끝의 느린 구간이 좀 더 뚜렷함. - steps(n): n개의 단계로 나뉘어 진행.
- cubic-bezier: 복잡한 속도 변화 설정.
cubic bezier
대부분의 timing 함수들은 cubic bezier를 기반으로 한다.
cubic bezier 곡선은 부드러운 곡선을 모델링하기 위해 컴퓨터 그래픽에서 널리 사용되는 방법으로,
4개의 컨트롤 포인트를 사용해 transition의 시작부터 끝까지의 효과를 제어한다.
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); /* 시작은 매우 느리고, 끝은 매우 빠름 */직접 작성할 수도 있고, 브라우저의 개발자모드에서도 조정해볼 수 있다.
cubic bezier를 쉽게 조작할 수 있도록 하는 사이트도 존재한다. (cubic-bezier)
steps
함수는 변화의 단계를 설정한다.
각 단계는 일정한 시간 동안 유지되며, 단계의 변화는 각 단계의 끝 부분 또는 시작 부분에서 발생한다.
transition-timing-function: steps(5, end);steps의 첫번째 값은 애니메이션을 나눌 단계의 수를 양의 정수를 사용하여 지정한다.
두번째 값은 선택 사항으로, 각 단계의 변화를 언제 발생시킬지 지정한다. (기본값 end)
- start: 각 단계의 변화가 시작 부분에서 발생.
- end: 각 단계의 변화가 끝 부분에서 발생.
언제 사용할까?
프레임 기반 애니메이션이나 타이핑 효과 등을 구현할 때 유용하게 사용된다.
예를 들어, 스프라이트 시트를 사용한 캐릭터 애니메이션이나 디지털 시계 숫자 변경 효과 등을 만들 때 효과적이다.
transition-delay
transition 시작을 지연시키는 시간을 설정한다.
양수 값은 지정된 시간 후에, 음수 값은 이미 진행 중인 것처럼 시작한다.
transition-duration: 1s;transition
모든 transition 관련 속성을 한 번에 설정할 수 있다.
순서: property, duration, timing-function, delay
transition: all 0.3s ease-in-out;display, outline 등 그 외 몇 가지 style속성은 transition의 단축 속성을 이용할 수 없다.
지원되는 속성 목록
animation
JavaScript 없이 요소에 애니메이션 효과를 적용할 때 사용한다.
여러 스타일을 전환시킬 수 있으며, 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어진다.
transition vs animation
transition의 경우 요소의 상태가 변경되어야 애니메이션을 실행할 수 있지만,animation속성은 요소의 상태 변화와 관계없이 애니메이션을 실행할 수 있다.
@keyframes
@keyframes는 두 개 이상의 애니메이션 중간 상태를 설정한다.
0%는 시작점, 100%는 종료 시점을 의미하며, from과 to로도 표현할 수 있다.
@keyframes animation-name {
from {
/* 시작 상태 */
}
to {
/* 종료 상태 */
}
}
@keyframes animation-name {
0% {
/* 시작 상태 */
}
50% {
/* 중간 상태 */
}
100% {
/* 종료 상태 */
}
}위의 구조를 이용하여 예시 코드를 작성해보자.
@keyframes move {
to {
background-position: right 0;
}
}css
div {
width: 100px;
height: 200px;
background: url('/images/width_long_img.png') no-repeat 0 0 / auto 100%;
animation: move 0.8s infinite steps(5);
}위의 예제는 가로로 긴 width_long_img.png 이미지를 5단계로 나누어 실행한다.
예를 들어 width_long_img.png 이미지의 너비가 1000px이라고 하면,
1000px을 5등분 하여 200px 단위로 움직이게 된다.
즉, left 값이 0.8초 동안 0px, 200px, 400px. 600px, 800px 순서대로 이동하며 이미지를 보여준다고 생각하면 된다.
animation-name
애니메이션의 이름으로, 영문 소문자, 문자열, 언더바(_), 하이픈(-)으로 시작힌다.
애니메이션을 적용시키려는 요소에서 호출한다.
@keyframes animation-name {
}
/* 옳은 예 */
name
_name
-name
/* 나쁜 예 */
Name
#name
1nameanimation-duration
애니메이션이 한 사이클을 완료하는 데 걸리는 시간을 지정한다.
단위는 초(s) 또는 밀리초(ms)를 사용하며, 음수값으로 설정하면 애니메이션이 실행되지 않는다.
animation-duration: 0.1s;
animation-duration: 100ms;animation-timing-function
애니메이션의 진행 속도를 제어한다.
animation-timing-function: ease;
animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
animation-timing-function: steps(4);- ease: 기본값. 느리게 시작해서 빨라졌다 끝에서 느려짐.
- linear: 일정한 속도로 진행.
- steps(n): n개의 단계로 나뉘어 진행.
- cubic-bezier: 복잡한 속도 변화 설정.
animation-delay
애니메이션의 시작 시점을 지정한다.
양수 값을 사용하면 지정된 시간 후에 애니메이션이 시작되고, 음수 값을 사용하면 애니메이션이 이미 진행 중인 것처럼 중간부터 시작된다.
animation-delay: 3s;
animation-delay: -1500ms;
/_음수값: 애니메이션이 중간부터 시작 _/;animation-iteration-count
애니메이션 재생 횟수를 설정한다.
infinite로 설정하면 애니메이션이 무한히 반복된다.
animation-iteration-count: 3;
animation-iteration-count: infinite;animation-direction
애니메이션 재생 방향을 지정한다.
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;- normal: 기본값. 정방향으로 재생.
- reverse: 역방향으로 재생.
- alternate: 정방향과 역방향을 번갈아가며 재생.
- alternate-reverse: 역방향과 정방향을 번갈아가며 재생.
animation-fill-mode
애니메이션 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정한다.
animation-fill-mode: normal;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;- normal: 기본값. 애니메이션이 실행되지 않을 때는 스타일이 적용되지 않음.
- forwards: 애니메이션이 끝난 후 마지막 키프레임의 스타일을 유지.
- backwards: 애니메이션이 시작되기 전에 첫 번째 키프레임의 스타일을 적용.
- both: forwards와 backwards 모두 적용.
animation-play-state
애니메이션의 재생 상태를 설정한다.
animation-play-state: running; /_ 기본값 _/
animation-play-state: paused;- paused: 애니메이션을 일시 정지.
- running: 애니메이션을 재생.
animation
모든 animation 관련 속성을 한 번에 설정할 수 있는 단축속성이다.
순서: name duration timing-function delay iteration-count direction
fill-mode play-state
/* 단축 속성: animation: name duration timing-function delay iteration-count direction fill-mode play-state; */
animation: spin-grow 2s ease-in-out 1s 3 alternate both paused;Chrome 개발자 도구의 Elements 탭에서 요소를 선택한 후 Styles 패널을 보면,
애니메이션 속성에 대한 시각적 편집기를 사용할 수 있어서 애니메이션 효과를 실시간으로 조정하고 미리 볼 수 있다.
링크
