CSS 기초 강의 7편: CSS 애니메이션과 트랜지션으로 시각 효과 만들기

Study/CSS

CSS 기초 강의 7편: CSS 애니메이션과 트랜지션으로 시각 효과 만들기

wawManager 2024. 11. 22. 12:00

728x90

1. CSS 트랜지션 (Transition)

트랜지션은 특정 스타일 속성이 변경될 때 애니메이션 효과를 적용하여 변화를 부드럽게 만듭니다. 주로 마우스 호버 또는 클릭 이벤트와 같은 상황에서 사용됩니다.

트랜지션 기본 문법

선택자 {
    transition: 속성 시간 타이밍함수 지연시간;
}

속성: 트랜지션을 적용할 CSS 속성 (예: width, background-color 등)
시간(duration): 트랜지션 효과가 완료되는 데 걸리는 시간 (예: 0.5s, 1s 등)
타이밍 함수(timing-function): 트랜지션 진행 속도를 조절 (ease, linear, ease-in, ease-out)
지연시간(delay): 트랜지션이 시작되기 전 대기 시간

예제: 마우스 호버 시 배경색 변경

.button {
    background-color: lightblue;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: darkblue;
    color: white;
}

코드 설명

transition: background-color 0.3s ease;로 배경색이 0.3초 동안 부드럽게 변경됩니다.
마우스를 올렸을 때(:hover) 배경색이 darkblue로 바뀌면서 트랜지션 효과가 적용됩니다.

2. 트랜지션 속성별 사용 예시

1) 여러 속성에 트랜지션 적용하기

.card {
    width: 200px;
    height: 300px;
    background-color: lightgrey;
    transition: width 0.5s, height 0.5s, background-color 0.3s;
}

.card:hover {
    width: 220px;
    height: 320px;
    background-color: grey;
}

2) transition-timing-function 속성

transition-timing-function으로 트랜지션 속도를 조절할 수 있습니다.

ease: 천천히 시작하고 끝이 부드러움
linear: 일정한 속도로 진행
ease-in: 천천히 시작
ease-out: 천천히 끝남

.box {
    width: 100px;
    height: 100px;
    background-color: salmon;
    transition: width 1s ease-in-out;
}

.box:hover {
    width: 150px;
}

3. CSS 애니메이션 (Animation)

CSS 애니메이션은 복잡한 다단계 시각 효과를 적용할 때 사용합니다. 애니메이션은 @keyframes 규칙을 사용해 각 단계의 스타일을 정의합니다.

애니메이션 기본 문법

애니메이션 이름 정의: @keyframes를 사용해 애니메이션의 이름과 각 단계의 스타일을 지정합니다.
애니메이션 적용: animation 속성으로 애니메이션을 적용합니다.

@keyframes 애니메이션이름 {
    0% { 속성: 값; }
    100% { 속성: 값; }
}

선택자 {
    animation: 애니메이션이름 시간 타이밍함수 반복횟수;
}

예제: 크기와 색상 변화 애니메이션

@keyframes growAndShrink {
    0% {
        width: 100px;
        background-color: red;
    }
    50% {
        width: 150px;
        background-color: orange;
    }
    100% {
        width: 100px;
        background-color: red;
    }
}

.box {
    width: 100px;
    height: 100px;
    animation: growAndShrink 2s ease-in-out infinite;
}

코드 설명

@keyframes growAndShrink에서 0%, 50%, 100% 단계별로 크기와 색상을 정의했습니다.
animation: growAndShrink 2s ease-in-out infinite;로 2초간 애니메이션이 반복되도록 설정했습니다.

4. 애니메이션 속성별 사용 예시

1) animation-delay (애니메이션 지연 시간)

애니메이션이 시작되기 전 대기 시간을 설정합니다.

.box {
    animation: growAndShrink 2s ease-in-out infinite;
    animation-delay: 1s; /* 애니메이션 시작 전 1초 대기 */
}

2) animation-iteration-count (반복 횟수)

애니메이션 반복 횟수를 지정합니다. infinite 값으로 무한 반복도 가능합니다

.box {
    animation: growAndShrink 2s ease-in-out 3; /* 3번 반복 후 종료 */
}

3) animation-direction (애니메이션 방향)

애니메이션의 방향을 설정하여 앞뒤로 움직이도록 할 수 있습니다.

normal: 시작부터 끝 방향으로 재생
reverse: 끝에서 시작으로 재생
alternate: 정방향과 역방향을 번갈아가며 재생

.box {
    animation: growAndShrink 2s ease-in-out infinite;
    animation-direction: alternate;
}

5. 트랜지션과 애니메이션을 활용한 예제

아래는 트랜지션과 애니메이션을 함께 활용하여 마우스 호버 시 크기와 색상이 변화하는 버튼 예제입니다.

<!DOCTYPE html>
<html>
<head>
    <title>CSS 애니메이션과 트랜지션</title>
    <style>
        .button {
            background-color: lightblue;
            padding: 15px 30px;
            font-size: 18px;
            border: none;
            cursor: pointer;
            transition: transform 0.3s ease, background-color 0.3s ease;
        }

        .button:hover {
            transform: scale(1.1); /* 크기 확대 */
            background-color: deepskyblue;
        }

        /* 애니메이션 정의 */
        @keyframes pulse {
            0% {
                box-shadow: 0 0 5px lightblue;
            }
            50% {
                box-shadow: 0 0 20px lightblue;
            }
            100% {
                box-shadow: 0 0 5px lightblue;
            }
        }

        /* 버튼에 애니메이션 적용 */
        .button {
            animation: pulse 2s infinite; /* 무한 반복 */
        }
    </style>
</head>
<body>
    <button class="button">Hover Me!</button>
</body>
</html>

코드 설명

트랜지션: 마우스 호버 시 transform으로 버튼의 크기를 확대하고, background-color로 배경색을 변경합니다.
애니메이션: pulse 애니메이션으로 버튼에 그림자가 확대되었다가 줄어드는 효과를 추가했습니다.

6. CSS 애니메이션과 트랜지션 속성 요약

속성설명

transition	속성 변화에 대한 트랜지션 효과를 설정
transition-duration	트랜지션 지속 시간 설정
transition-timing-function	트랜지션 진행 속도 설정 (ease, linear 등)
animation	애니메이션을 한 줄로 설정 (이름 시간 타이밍함수 반복횟수)
animation-name	애니메이션 이름 지정
animation-duration	애니메이션 지속 시간
animation-timing-function	애니메이션 진행 속도 조절 (ease, linear 등)
animation-delay	애니메이션 시작 전 대기 시간 설정
animation-iteration-count	애니메이션 반복 횟수 설정
animation-direction	애니메이션 방향 설정 (normal, reverse, alternate 등)

요약

이번 강의에서는 CSS 트랜지션과 애니메이션을 사용해 웹 페이지에 생동감을 주는 방법을 배웠습니다. 트랜지션은 간단한 상태 변화에 사용되며

728x90