6장: CSS 애니메이션과 트랜지션

### 6.1 트랜지션 (Transitions)

트랜지션은 CSS 속성의 변경이 일어날 때 애니메이션 효과를 추가하여 부드럽게 변하도록 합니다.

#### 6.1.1 기본 사용법

트랜지션을 적용하려는 요소에 `transition` 속성을 사용합니다.

예제:
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: background-color 1s;
}

.box:hover {
    background-color: blue;
}

HTML 코드:
<div class="box"></div>

이 예제는 `box` 요소에 마우스를 올리면 배경색이 1초 동안 부드럽게 빨간색에서 파란색으로 변경됩니다.

#### 6.1.2 여러 속성에 트랜지션 적용

여러 CSS 속성에 트랜지션을 적용할 수 있습니다.

예제:
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: background-color 1s, width 0.5s;
}

.box:hover {
    background-color: blue;
    width: 200px;
}

이 예제는 `box` 요소에 마우스를 올리면 배경색과 너비가 부드럽게 변경됩니다.

#### 6.1.3 트랜지션 속성

- `transition-property`: 트랜지션을 적용할 CSS 속성을 지정합니다.
- `transition-duration`: 트랜지션이 완료되는 데 걸리는 시간을 지정합니다.
- `transition-timing-function`: 트랜지션의 속도 곡선을 지정합니다. (예: `ease`, `linear`, `ease-in`, `ease-out`, `ease-in-out`)
- `transition-delay`: 트랜지션이 시작되기 전의 지연 시간을 지정합니다.

예제:
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition-property: background-color, width;
    transition-duration: 1s, 0.5s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s, 0.5s;
}

.box:hover {
    background-color: blue;
    width: 200px;
}

### 6.2 애니메이션 (Animations)

애니메이션은 CSS 속성을 순차적으로 변경하여 복잡한 애니메이션 효과를 구현할 수 있습니다. `@keyframes` 규칙과 `animation` 속성을 사용합니다.

#### 6.2.1 기본 사용법

애니메이션을 정의하려면 `@keyframes` 규칙을 사용합니다.

예제:
@keyframes myAnimation {
    from {
        background-color: red;
    }
    to {
        background-color: blue;
    }
}

.box {
    width: 100px;
    height: 100px;
    animation: myAnimation 2s infinite;
}

HTML 코드:
<div class="box"></div>

이 예제는 `box` 요소가 2초 동안 빨간색에서 파란색으로 애니메이션되며, 무한히 반복됩니다.

#### 6.2.2 키프레임 (Keyframes)

키프레임은 애니메이션의 중간 단계를 정의합니다. `from`과 `to` 키워드 대신, `0%`에서 `100%`까지의 값을 사용할 수 있습니다.

예제:
@keyframes myAnimation {
    0% {
        background-color: red;
        transform: translateX(0);
    }
    50% {
        background-color: yellow;
        transform: translateX(100px);
    }
    100% {
        background-color: blue;
        transform: translateX(0);
    }
}

.box {
    width: 100px;
    height: 100px;
    animation: myAnimation 3s infinite;
}

이 예제는 `box` 요소가 3초 동안 빨간색에서 노란색, 다시 파란색으로 변경되며, X축 방향으로 100픽셀 이동한 후 돌아옵니다.

#### 6.2.3 애니메이션 속성

- `animation-name`: 애니메이션의 이름을 지정합니다.
- `animation-duration`: 애니메이션이 완료되는 데 걸리는 시간을 지정합니다.
- `animation-timing-function`: 애니메이션의 속도 곡선을 지정합니다.
- `animation-delay`: 애니메이션이 시작되기 전의 지연 시간을 지정합니다.
- `animation-iteration-count`: 애니메이션의 반복 횟수를 지정합니다.
- `animation-direction`: 애니메이션의 재생 방향을 지정합니다. (`normal`, `reverse`, `alternate`, `alternate-reverse`)

예제:
@keyframes myAnimation {
    0% {
        background-color: red;
        transform: translateX(0);
    }
    100% {
        background-color: blue;
        transform: translateX(100px);
    }
}

.box {
    width: 100px;
    height: 100px;
    animation-name: myAnimation;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

### 6.3 애니메이션 활용 예제

#### 6.3.1 로딩 애니메이션

간단한 로딩 애니메이션을 구현해보겠습니다.

예제:
@keyframes loading {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loader {
    width: 50px;
    height: 50px;
    border: 5px solid lightgray;
    border-top: 5px solid blue;
    border-radius: 50%;
    animation: loading 1s infinite linear;
}

HTML 코드:
<div class="loader"></div>

#### 6.3.2 텍스트 애니메이션

텍스트 색상이 변경되는 애니메이션을 구현해보겠습니다.

예제:
@keyframes textAnimation {
    0% {
        color: red;
    }
    50% {
        color: yellow;
    }
    100% {
        color: green;
    }
}

.text {
    font-size: 24px;
    animation: textAnimation 2s infinite;
}

HTML 코드:
<p class="text">애니메이션 텍스트</p>

### 연습 문제

1. 트랜지션을 사용하여 버튼에 마우스를 올렸을 때 배경색과 크기가 부드럽게 변경되도록 해 보세요.
2. `@keyframes`를 사용하여 요소의 색상과 위치가 변경되는 애니메이션을 만들어 보세요.
3. 애니메이션 속성을 사용하여 로딩 애니메이션을 구현해 보세요.
4. 텍스트 색상이 변경되는 애니메이션을 구현해 보세요.