animation
1. CSS Animation
CSS Animation은 여러 스타일을 전환시킬 수 있으며, JavaScript 없이 요소에 애니메이션 효과를 적용할 때 사용합니다. 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어집니다.
1.1 transition vs animation
transition의 경우 요소의 상태가 변경되어야 애니메이션을 실행할 수 있지만, animation 속성은 요소의 상태 변화와 관계없이 애니메이션을 실행할 수 있습니다.
1.2 @keyframes
@keyframes는 두 개 이상의 애니메이션 중간 상태를 설정합니다. 0%는 시작점, 100%는 종료 시점을 의미하며, from과 to로도 표현할 수 있습니다.
@keyframes animation-name {
from {
/* 시작 상태 */
}
to {
/* 종료 상태 */
}
}
/* 또는 */
@keyframes animation-name {
0% {
/* 시작 상태 */
}
50% {
/* 중간 상태 */
}
100% {
/* 종료 상태 */
}
}@keyframes animation-name {
from {
/* 시작 상태 */
}
to {
/* 종료 상태 */
}
}
/* 또는 */
@keyframes animation-name {
0% {
/* 시작 상태 */
}
50% {
/* 중간 상태 */
}
100% {
/* 종료 상태 */
}
}
이 이미지 소스를 사용해서 라이캣이 걷는 모션을 @keyframes를 사용해 구현해보았습니다. 코드를 간단히 살펴보겠습니다.
.licat 요소의 크기는 width: 168px;와 height: 200px;로 설정되어 있습니다. background 속성은 스프라이트 이미지를 설정하고 그 초기 위치를 지정합니다. 배경 이미지 위치와 관련하여, 0 0은 스프라이트 시트의 시작점인 왼쪽 상단 모서리를, 50% 50%는 이미지의 중앙을, 그리고 100% 100%는 오른쪽 하단 모서리를 나타냅니다. 특히 background-position: 0 0은 스프라이트 시트의 첫 번째 프레임을 표시하는 데 사용됩니다.
background-size: auto 100%; 는 스프라이트 이미지의 높이를 요소에 맞추고 너비는 자동으로 조정하도록 설정합니다. steps(6) 함수는 애니메이션을 6단계로 나누어 실행하도록 지정하는데, 이는 스프라이트 시트의 6개 프레임과 일치합니다. 스프라이트 시트의 각 프레임은 캐릭터의 걷는 동작을 순차적으로 나타내며, CSS 애니메이션은 이 프레임들을 빠르게 전환하여 부드러운 움직임을 만들어냅니다.
이미지는 스프라이트 시트의 각 프레임이 어떻게 순차적으로 표시되는지 보여줍니다. 애니메이션이 진행됨에 따라 배경 이미지의 위치가 오른쪽으로 점진적으로 이동하는 것을 볼 수 있습니다. 첫 번째 프레임은 background-position: 0 0에서 시작하여, 마지막 프레임에서는 right 0에 도달합니다. 배경 이미지가 요소의 너비만큼 정확히 이동하여 각 단계에서 새로운 프레임이 표시되면서 캐릭터의 자세가 미묘하게 변화하는 것을 관찰할 수 있습니다. 이러한 연속적인 프레임 전환이 빠르게 일어나면서 캐릭터가 실제로 걷는 듯한 자연스러운 움직임이 만들어집니다.
1.3 animation 속성
1.3.1 animation-name
애니메이션의 이름을 지정합니다. 이름은 영문 소문자, 문자열, 언더바(_), 하이픈(-)으로 시작해야 합니다.
@keyframes animation-name {
}@keyframes animation-name {
}/* 옳은 예 */
name
_name
-name
/* 나쁜 예 */
Name
#name
1name/* 옳은 예 */
name
_name
-name
/* 나쁜 예 */
Name
#name
1name1.3.2 animation-duration
애니메이션이 한 사이클을 완료하는 데 걸리는 시간을 지정합니다. 단위는 초(s) 또는 밀리초(ms)를 사용하며, 음수값으로 설정하면 애니메이션이 실행되지 않습니다.
animation-duration: 0.1s;
animation-duration: 100ms;animation-duration: 0.1s;
animation-duration: 100ms;1.3.3 animation-timing-function
애니메이션의 진행 속도를 제어하는 속성입니다.
ease: 기본값. 애니메이션이 중간에 빨라졌다 끝에서 느려지는 자연스러운 움직임을 만듭니다.linear: 애니메이션이 일정한 속도로 진행됩니다.steps(n): 애니메이션 n개의 단계로 나뉘어 진행됩니다.cubic-bezier: 복잡한 속도 변화를 가능하게 합니다.
animation-timing-function: ease;
animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
animation-timing-function: steps(4);animation-timing-function: ease;
animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
animation-timing-function: steps(4);크롬 개발자 도구에서 다양한 속성을 확인할 수 있습니다.
1.3.4 animation-delay
애니메이션 시작 시점을 지정합니다. 양수 값을 사용하면 지정된 시간 후에 애니메이션이 시작되고, 음수 값을 사용하면 애니메이션이 이미 진행 중인 것처럼 중간부터 시작됩니다. 예를 들어, -1s 값을 지정하면 애니메이션이 1초 지점부터 즉시 시작됩니다. 이 기능은 여러 요소의 애니메이션을 동기화하거나 특정 지점부터 애니메이션을 시작하고 싶을 때 유용합니다.
animation-delay: 3s;
animation-delay: -1500ms;
/_음수값: 애니메이션이 중간부터 시작 _/;animation-delay: 3s;
animation-delay: -1500ms;
/_음수값: 애니메이션이 중간부터 시작 _/;1.3.5 animation-iteration-count
애니메이션 재생 횟수를 설정합니다. infinite로 설정하면 애니메이션이 무한히 반복됩니다.
animation-iteration-count: 3;
animation-iteration-count: infinite;animation-iteration-count: 3;
animation-iteration-count: infinite;1.3.6 animation-direction
애니메이션의 재생 방향을 지정합니다.
normal: 기본값. 정방향으로 재생됩니다.reverse: 역방향으로 재생됩니다.alternate: 정방향과 역방향을 번갈아가며 재생합니다.alternate-reverse: 역방향과 정방향을 번갈아가며 재생합니다.
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;1.3.7 animation-fill-mode
애니메이션 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정합니다.
normal: 기본값. 애니메이션이 실행되지 않을 때는 스타일이 적용되지 않습니다.forwards: 애니메이션이 끝난 후 마지막 키프레임의 스타일을 유지합니다.backwards: 애니메이션이 시작되기 전에 첫 번째 키프레임의 스타일을 적용합니다.both:forwards와backwards를 모두 적용합니다.
1.3.8 animation-play-state
애니메이션의 재생 상태를 설정합니다.
paused: 애니메이션을 일시 정지 상태로 시작합니다.running: 애니메이션을 재생 상태로 시작합니다.
animation-play-state: running; /_ 기본값 _/
animation-play-state: paused;animation-play-state: running; /_ 기본값 _/
animation-play-state: paused;1.3.9 animation (단축 속성)
모든 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;팁
Chrome 개발자 도구의 Elements 탭에서 요소를 선택한 후 Styles 패널을 보면, 애니메이션 속성에 대한 시각적 편집기를 사용할 수 있습니다. 이를 통해 애니메이션 효과를 실시간으로 조정하고 미리 볼 수 있습니다.
CSS 애니메이션을 활용하면 복잡한 움직임과 전환 효과를 JavaScript 없이도 구현할 수 있습니다. 특히 반복적인 애니메이션이나 부드러운 전환 효과를 만들 때 유용합니다.
1.4 실습 시계 초침, 분침, 시침 만들기
아래와 같은 모양의 위젯을 만들고 시계처럼 돌아가는 애니메이션을 만들어보세요. 단, 실제 시계처럼 정확히 동작할 필요는 없습니다.
