{"id":"26YKpK","createdAt":"2024-05-11T00:00:00.000Z","updatedAt":null,"title":"CSS Animation 완벽 가이드","content":"CSS Animation(애니메이션)은 여러 CSS 스타일 속성으로 요소의 크기, 색상, 모양 등을 제어해 애니메이션 효과를 부여하는 기술입니다.\n자바스크립트를 사용하지 않고도 간단하게 요소에 동적 효과를 부여할 수 있기 때문에, 보다 좋은 성능으로 애니메이션을 구현할 수 있습니다.\n\n## 전환 vs 애니메이션\n\nCSS 전환(Transition)은 요소의 전후 상태를 부드럽게 변화시키는 효과를 제공하며, 단지 시작과 종료 상태만 고려하면 되기 때문에 간단하게 사용할 수 있습니다.\n반면, 애니메이션(Animation)은 시작과 종료뿐만 아니라 중간 상태도 고려할 수 있으며, 더 복잡하고 다양한 효과를 추가할 수 있습니다.\n\n

\n \n

Transition vs Animation / 요소에 마우스를 올려보세요.

\n\n\n## @keyframes\n\n`@keyframes`는 '애니메이션 프레임'을 정의하는 CSS 규칙입니다.\n`from`, `to` 키워드로 애니메이션의 시작과 종료 스타일 정의하거나, `0%`부터 `100%` 사이의 퍼센트 값으로 각 단계의 애니메이션을 정의할 수 있습니다.\n\n```css\n/* from-to */\n@keyframes 애니메이션이름 {\n from {}\n to {}\n}\n\n/* percentage */\n@keyframes 애니메이션이름 {\n 0% {}\n 50% {}\n 100% {}\n}\n```\n\n## animation\n\n`animation`은 각 애니메이션 제어 속성의 단축 속성입니다.\n애니메이션의 이름과 지속시간은 필수이며, 나머지 속성은 선택적으로 지정합니다.\n\n```css\nanimation: 애니메이션이름 지속시간 대기시간? 타이밍함수? 반복횟수? 반복방향? 전후상태? 재생/정지?;\n```\n\n값 | 의미 | 기본값 \n---|---|---\n`animation-name` | `@keyframes`의 이름 | `none` \n`animation-duration` | 지속 시간 | `0s` \n`animation-delay` | 대기 시간 | `0s` \n`animation-timing-function` | 타이밍 함수 | `ease` \n`animation-iteration-count` | 반복 횟수 | `1` \n`animation-direction` | 반복 방향 | `normal` \n`animation-fill-mode` | 전후 상태 | `none` \n`animation-play-state` | 재생과 정지 | `running` \n\n### animation-name\n\n사용할 `@keyframes` 규칙(애니메이션 프레임)의 이름(Name)을 지정합니다.\n\n값 | 의미 | 기본값 \n---|---|---\n`none` | 애니메이션을 지정하지 않음 | `none` \n`@keyframes`이름 | 이름이 일치하는 `@keyframes`규칙의 애니메이션을 적용 | \n\n다음 예제에서 요소에 마우스를 올리면, `heropy`라는 이름의 애니메이션 프레임(요소의 너비가 `300px`에서 `500px`로 변화)을 적용합니다.\n애니메이션 프레임이 실제 동작하려면, 몇 초 동안 지속되는지 같이 지정해야 합니다.\n\n```css --line-active=3-4,7\n.item:hover {\n /* animation: heropy 2s; */\n animation-name: heropy;\n animation-duration: 2s;\n}\n\n@keyframes heropy {\n 0% { width: 300px; }\n 100% { width: 500px; }\n}\n```\n\n

\n \n

요소에 마우스를 올려보세요.

\n\n\n### animation-duration\n\n애니메이션 프레임의 지속 시간(Duration)을 지정합니다.\n지속 시간은 애니메이션이 시작하고 종료하는 데 걸리는 시간을 의미합니다.\n\n값 | 의미 | 기본값 \n---|---|---\n시간 | 지속 시간을 설정 | `0s` \n\n```css --line-active=4,5\n.item:hover {\n animation-name: heropy;\n}\n.item:nth-child(1):hover { animation-duration: 2s; }\n.item:nth-child(2):hover { animation-duration: 8s; }\n\n@keyframes heropy {\n 0% { width: 300px; }\n 100% { width: 500px; }\n}\n```\n\n\n

\n \n

요소에 마우스를 올려보세요.

\n\n\n만약 다음과 같이 `animation` 단축 속성을 사용하면, 기존의 속성을 덮어쓰며 애니메이션 프레임 이름이 누락되기 때문에 동작하지 않습니다.\n\n```css --line-error=4,5\n.item:hover {\n animation: heropy;\n}\n.item:nth-child(1):hover { animation: 2s; }\n.item:nth-child(2):hover { animation: 8s; }\n```\n\n### animation-delay\n\n애니메이션이 시작하기 전에 얼마나 기다릴 것인지의 대기 시간(Delay)을 설정합니다.\n만약 음수 시간을 적용하면, 그 값만큼 애니메이션이 앞서 시작합니다.\n\n값 | 의미 | 기본값 \n---|---|---\n시간 | 대기 시간을 설정 | `0s` \n\n```css\n.item:hover {\n /* animation: heropy 2s; */\n animation-name: heropy;\n animation-duration: 2s;\n}\n.item:nth-child(1):hover { animation-delay: 0s; }\n.item:nth-child(2):hover { animation-delay: 1s; }\n.item:nth-child(3):hover { animation-delay: -1s; }\n\n@keyframes heropy {\n 0% { width: 300px; }\n 100% { width: 500px; }\n}\n```\n\n

\n \n

요소에 마우스를 올려보세요.

\n\n\n### animation-timing-function\n\n애니메이션에서 사용할 [타이밍 함수](https://easings.net/ko)를 지정합니다.\n\n/// message-box --icon=info\n타이밍 함수(Timing Function) 또는 이징 함수(Easing Function)는 애니메이션 시작부터 종료까지의 가속도와 감속도를 조정해 애니메이션의 진행 방식을 결정하는 기능입니다.\n///\n\n값 | 의미 | 기본값 | Cubic Bezier 값 \n---|---|---|---\n`linear` | 일정하게 | | `cubic-bezier(0, 0, 1, 1)` \n`ease` | 빠르게 - 느리게 | `ease` | `cubic-bezier(0.25, 0.1, 0.25, 1)` \n`ease-in` | 느리게 - 빠르게 | | `cubic-bezier(0.42, 0, 1, 1)` \n`ease-out` | 빠르게 - 느리게 | | `cubic-bezier(0, 0, 0.58, 1)` \n`ease-in-out` | 느리게 - 빠르게 - 느리게 | | `cubic-bezier(.42, 0, .58, 1)`\n`cubic-bezier(n1, n2, n3, n4)` | 자신만의 값을 정의(`0`~1) | | \n`steps(n, j?)` | `n`번 분할된 애니메이션 | | \n\n```css\n.item {\n /* animation: heropy 3s infinite; */\n animation-name: heropy;\n animation-duration: 3s;\n animation-iteration-count: infinite;\n}\n.item:nth-child(1) { animation-timing-function: linear; }\n.item:nth-child(2) { animation-timing-function: ease; }\n.item:nth-child(3) { animation-timing-function: ease-in; }\n.item:nth-child(4) { animation-timing-function: ease-out; }\n.item:nth-child(5) { animation-timing-function: ease-in-out; }\n.item:nth-child(6) { animation-timing-function: cubic-bezier(0.83, 0, 0.5, 1.73); }\n.item:nth-child(7) { animation-timing-function: steps(4); }\n\n@keyframes heropy {\n 0% { width: 300px; }\n 100% { width: 500px; }\n}\n```\n\n

\n \n\n\n#### cubic-bezier\n\nCSS `cubic-bezier()` 함수는 두 개의 시작점과 두 개의 제어점으로 이루어진, [베지어 곡선](https://developer.mozilla.org/en-US/docs/Glossary/Bezier_curve)을 정의해 애니메이션의 타이밍과 속도를 제어합니다.\n\n```css\ncubic-bezier(n1, n2, n3, n4)\n```\n\n크롬 개발자 도구의 'cubic bezier 에디터'를 사용하면, 각 점의 값을 조정하며 애니메이션의 타이밍 함수를 시각적으로 확인할 수 있습니다.\n\n![Timing Function 값의 아이콘을 선택](https://somwpkzlplaovldnfahk.supabase.co/storage/v1/object/public/heropy.dev_posts/26YKpK/s2.JPG)\n\n![에디터 하단의 화살표 버튼을 선택](https://somwpkzlplaovldnfahk.supabase.co/storage/v1/object/public/heropy.dev_posts/26YKpK/s3.JPG)\n\n![다양한 값을 확인](https://somwpkzlplaovldnfahk.supabase.co/storage/v1/object/public/heropy.dev_posts/26YKpK/s4.JPG)\n\n#### steps\n\nCSS `steps()` 함수는 애니메이션을 몇 단계로 나눌지 설정합니다.\n\n```css\nsteps(단계, 점프타이밍?)\n```\n\n값 | 의미 | 기본값\n---|---|---\n`jump-start` or `start` | 시작(`0%`)을 건너뜀 | \n`jump-end` or `end` | 종료(`100%`)를 건너뜀 | `jump-end`\n`jump-both` | 시작과 종료를 모두 건너뜀 | \n`jump-none` | 건너뛰지 않음 | \n\n다음 예제는 왼쪽에서 오른쪽으로 이동하는 애니메이션을 `steps()` 함수를 통해 5단계로 나눈 결과입니다.\n각 점프 타이밍에 따라 시작과 종료 지점이 달라지는 것을 확인할 수 있습니다.\n\n```css\n.item {\n width: 150px;\n animation-name: heropy;\n animation-duration: 3s;\n animation-iteration-count: infinite;\n}\n.item:nth-child(1) { animation-timing-function: steps(5, jump-start); }\n.item:nth-child(2) { animation-timing-function: steps(5, jump-end); } /* 기본값 */\n.item:nth-child(3) { animation-timing-function: steps(5, jump-both); }\n.item:nth-child(4) { animation-timing-function: steps(5, jump-none); }\n\n@keyframes heropy {\n 0% { transform: translateX(0px); }\n 100% { transform: translateX(500px); }\n}\n```\n\n\n\n### animation-iteration-count\n\n애니메이션의 반복 횟수를 지정합니다.\n\n값 | 의미 | 기본값 \n---|---|---\n숫자 | 반복 횟수를 설정 | `1` \n`infinite` | 무한 반복 | \n\n```css\n.item:hover {\n /* animation: heropy 2s; */\n animation-name: heropy;\n animation-duration: 2s;\n}\n.item:nth-child(1):hover { animation-iteration-count: 1; }\n.item:nth-child(2):hover { animation-iteration-count: 2; }\n.item:nth-child(3):hover { animation-iteration-count: 3; }\n\n@keyframes heropy {\n 0% { width: 300px; }\n 100% { width: 500px; }\n}\n```\n\n

\n \n

요소에 마우스를 올려보세요.

\n\n\n### animation-direction\n\n애니메이션의 반복의 방향을 지정합니다.\n예를 들어 요소가 왼쪽에서 오른쪽으로 움직이는 애니메이션이 있다면, 요소가 왼쪽에서 오른쪽으로 움직이는 것이 '정방향' 동작이며, 반대로 요소가 오른쪽에서 왼쪽으로 움직이는 것은 '역방향' 동작입니다.\n그리고 요소가 정방향과 역방향 모두 동작하는 것을 '왕복'이라고 하며, 왕복으로 애니매이션 하려면 `animation-iteration-count` 속성(반복 횟수)의 값이 `2` 이상이어야 합니다.\n\n값 | 의미 | 기본값 \n---|---|---\n`normal` | 정방향만 반복 | `normal` \n`reverse` | 역방향만 반복 | \n`alternate` | 정방향 왕복 | \n`alternate-reverse` | 역방향 왕복 | \n\n```css\n.item:hover {\n /* animation: heropy 2s 2; */\n animation-name: heropy;\n animation-duration: 2s;\n animation-iteration-count: 2;\n}\n.item:nth-child(1):hover { animation-direction: normal; }\n.item:nth-child(2):hover { animation-direction: reverse; }\n.item:nth-child(3):hover { animation-direction: alternate; }\n.item:nth-child(4):hover { animation-direction: alternate-reverse; }\n\n@keyframes heropy {\n 0% { width: 300px; }\n 100% { width: 500px; }\n}\n```\n\n

\n \n

요소에 마우스를 올려보세요.

\n\n \n### animation-fill-mode\n\n애니메이션 전후의 요소 상태(스타일)를 지정합니다.\n요소가 가진 기본 스타일과 적용된 애니메이션 스타일 중 어떤 스타일을 애니메이션 전후에 유지할 것인지 결정합니다.\n애니메이션 스타일만 표시되길 원하는 경우, 기본 스타일을 무시하는 `both` 값을 지정합니다.\n\n값 | 의미 | 기본값 \n---|---|---\n`none` | 기본 상태 -> 애니메이션 시작 -> 애니메이션 종료 -> 기본 상태 | `none` \n`forwards` | 기본 상태 -> 애니메이션 시작 -> 애니메이션 종료 | \n`backwards` | 애니메이션 시작 -> 애니메이션 종료 -> 기본 상태 | \n`both` | 애니메이션 시작 -> 애니메이션 종료 | \n\n```css\n.item {\n /* animation: heropy 2s 1s; */\n animation-name: heropy;\n animation-duration: 2s;\n animation-delay: 1s;\n}\n.item:nth-child(1) { animation-fill-mode: none; }\n.item:nth-child(2) { animation-fill-mode: forwards; }\n.item:nth-child(3) { animation-fill-mode: backwards; }\n.item:nth-child(4) { animation-fill-mode: both; }\n\n@keyframes heropy {\n 0% { transform: translateX(230px) rotate(0deg); }\n 50% { transform: translateX(230px) rotate(360deg); }\n 85% { transform: translateX(500px) rotate(360deg); }\n 100% { transform: translateX(500px) rotate(360deg); }\n}\n```\n\n

\n \n

시작 버튼을 선택하면, 해당 애니메이션이 동작합니다.

\n\n\n### animation-play-state\n\n애니메이션 동작의 재생(Play)과 일시정지(Pause)를 지정합니다.\n\n값 | 의미 | 기본값 \n---|---|---\n`running` | 애니메이션을 재생 | `running` \n`paused` | 애니메이션을 일시정지 | \n\n```css\n.item {\n /* animation: heropy 2s infinite alternate; */\n animation-name: heropy;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n animation-direction: alternate;\n}\n.item:nth-child(1) { /* animation-play-state: running; */ }\n.item:nth-child(2) { animation-play-state: paused; }\n.item:nth-child(1):hover { animation-play-state: paused; }\n.item:nth-child(2):hover { animation-play-state: running; }\n\n@keyframes heropy {\n 0% { width: 300px; }\n 100% { width: 500px; }\n}\n```\n\n

\n \n

요소에 마우스를 올려보세요.

\n\n\n## animation-composition\n\n애니메이션 스타일을 어떻게 조합할지 지정합니다.\n\n값 | 의미 | 기본값 \n---|---|---\n`replace` | 기본 스타일을 애니메이션 스타일로 대체 | `replace` \n`add` | 기본 스타일에 애니메이션 스타일을 더함 | \n`accumulate` | 기본 스타일과 애니메이션 스타일을 섞음 | \n\n다음 예제에서 요소는 기본적으로 가로 100, 세로 50 너비의 우측으로 50 이동하고 2배 크기입니다.\n만약 `animation-composition` 속성의 값이 `replace`(기본값)인 경우, 기본 스타일이 애니메이션 스타일로 대체되어 우측으로 100 이동하고 2배 크기입니다.\n값이 `add`인 경우, 기본 스타일에 애니메이션 스타일을 더해 우측으로 250(50+100*2) 이동하고 4(2+2)배 크기입니다.\n값이 `accumulate`인 경우, 기본 스타일과 애니메이션 스타일을 섞어 우측으로 150(50+100) 이동하고 3배 크기입니다.\n\n/// message-box --icon=info\n값이 `accumulate`인 경우, 4배가 아닌 3배 크기(`scale(3)`)가 되는 이유, ['The mysterious case of using CSS animation-composition: accumulate on a scale transform'](https://www.bram.us/2023/12/18/the-mysterious-case-of-using-css-animation-composition-accumulate-on-a-scale-transform/)\n///\n\n```css\n.item {\n width: 100px;\n height: 50px;\n /* animation: heropy 3s both; */\n animation-name: heropy;\n animation-duration: 3s;\n animation-fill-mode: both;\n transform: translateX(50px) scale(2);\n transform-origin: 0 0;\n}\n.item:nth-child(1) { animation-composition: replace; }\n.item:nth-child(2) { animation-composition: add; }\n.item:nth-child(3) { animation-composition: accumulate; }\n\n@keyframes heropy {\n 0% {\n transform: translateX(50px) scale(1);\n }\n 100% {\n transform: translateX(100px) scale(2);\n }\n}\n```\n\n

\n \n

요소의 기본 스타일이 애니메이션 스타일과 조합된 결과 / 상단의 각 버튼을 선택해 보세요.

\n\n\n`animation-composition` 속성은 크롬 브라우저 기준, 112 버전부터 사용 가능합니다.\n\n![caniuse](https://somwpkzlplaovldnfahk.supabase.co/storage/v1/object/public/heropy.dev_posts/26YKpK/s1.JPG)\n\n## 애니메이션 예제\n\n### Simple Spinner\n\n```html\n\n

\n```\n\n\n\n### Spinner\n\n```html\n\n

\n \n

\n```\n\n\n\n### Skeleton Loader\n\n```html\n\n

\n```\n\n\n","isPublished":true,"isDeleted":false,"group":"CSS","tags":["CSS","Animation","Loader"],"comments":0,"image":"https://heropy.dev/postAssets/26YKpK/main.jpg","description":"CSS Animation(애니메이션)은 여러 CSS 스타일 속성으로 요소의 크기, 색상, 모양 등을 제어해 애니메이션 효과를 부여하는 기술로 자바스크립트 없이도 요소에 동적 효과를 부여할 수 있어, 보다 좋은 성능으로 애니메이션을 구현할 수 있습니다.","postname":"css-animation","video":[],"like":29,"embeddedAt":"2026-02-25T04:54:20.778Z"}