CSS 애니메이션 기초 - CSS 애니메이션의 기본 사용법과 간단한 예시

DevMaster!! 2024. 8. 10. 22:40

2024. 8. 10. 22:40

웹 페이지에 애니메이션을 추가하면 사용자 경험이 더욱 생동감 있고 흥미로워집니다. CSS 애니메이션은 간단한 방법으로 웹 요소에 애니메이션 효과를 줄 수 있는 강력한 도구입니다. 이 글에서는 CSS 애니메이션의 기본 개념과 사용법을 설명하고, 간단한 예제를 통해 애니메이션을 어떻게 적용할 수 있는지 알아보겠습니다.

CSS 애니메이션이란?

CSS 애니메이션은 CSS를 사용하여 HTML 요소의 속성을 일정 시간 동안 변경하는 기능을 제공합니다. 이를 통해 텍스트, 이미지, 버튼 등의 요소에 움직임이나 변화를 추가할 수 있습니다. 자바스크립트를 사용하지 않고도 CSS만으로 다양한 애니메이션 효과를 구현할 수 있습니다.

CSS 애니메이션의 주요 속성

CSS 애니메이션을 적용하려면 주로 두 가지를 사용합니다:

@keyframes: 애니메이션의 상태 변화를 정의하는 규칙입니다. @keyframes를 사용하여 애니메이션이 어떻게 진행될지 단계별로 설정할 수 있습니다.
animation: 애니메이션을 요소에 적용하는 데 사용되는 CSS 속성입니다.

@keyframes

@keyframes 규칙은 애니메이션의 각 단계에서 스타일이 어떻게 변하는지 정의합니다. 예를 들어, 애니메이션 시작 시점과 종료 시점의 스타일을 지정할 수 있습니다.

@keyframes example {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100px);
    }
}

위 예제에서는 example이라는 이름의 애니메이션을 정의하며, 요소가 원래 위치에서 오른쪽으로 100px 이동하는 애니메이션을 만듭니다.

animation 속성

animation 속성은 정의된 애니메이션을 특정 요소에 적용하는 데 사용됩니다. 이 속성에는 여러 가지 하위 속성이 포함될 수 있습니다.

.element {
    animation-name: example;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

주요 하위 속성:

animation-name: 사용할 애니메이션의 이름(@keyframes에서 정의한 이름).
animation-duration: 애니메이션이 한 번 재생되는 데 걸리는 시간.
animation-timing-function: 애니메이션의 속도 곡선을 정의합니다(e.g., linear, ease-in, ease-out, ease-in-out).
animation-delay: 애니메이션 시작 전 대기 시간.
animation-iteration-count: 애니메이션의 반복 횟수(숫자 또는 infinite).
animation-direction: 애니메이션이 반복될 때 진행 방향(normal, reverse, alternate, alternate-reverse).

CSS 애니메이션의 간단한 예시

예시 1: 텍스트에 간단한 페이드인 애니메이션 적용

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>페이드인 애니메이션 예제</title>
    <style>
        .fade-in {
            opacity: 0;
            animation: fadeIn 2s ease-in forwards;
        }

        @keyframes fadeIn {
            to {
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <h1 class="fade-in">안녕하세요, CSS 애니메이션!</h1>
</body>
</html>

설명:

opacity: 0;: 요소가 처음에 보이지 않도록 설정합니다.
animation: fadeIn 2s ease-in forwards;: fadeIn 애니메이션을 2초 동안 ease-in 속도로 재생하며, 애니메이션이 끝나면 최종 상태를 유지합니다.
@keyframes fadeIn: 이 애니메이션은 요소의 투명도를 1로 변경하여 요소가 서서히 나타나게 만듭니다.

예시 2: 버튼에 간단한 이동 애니메이션 적용

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>버튼 이동 애니메이션 예제</title>
    <style>
        .move-button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
            animation: move 3s ease-in-out infinite alternate;
        }

        @keyframes move {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(200px);
            }
        }
    </style>
</head>
<body>
    <button class="move-button">움직이는 버튼</button>
</body>
</html>

설명:

transform: translateX(0);: 애니메이션 시작 시 버튼이 원래 위치에 있습니다.
transform: translateX(200px);: 애니메이션 종료 시 버튼이 오른쪽으로 200px 이동합니다.
animation: move 3s ease-in-out infinite alternate;: move 애니메이션이 3초 동안 ease-in-out 속도로 무한히 반복되며, 진행 방향이 교차됩니다.

결론

CSS 애니메이션은 웹 페이지에 생동감을 불어넣는 간단하지만 강력한 도구입니다. 자바스크립트를 사용하지 않고도 간단한 애니메이션 효과를 구현할 수 있어, 다양한 시각적 효과를 통해 사용자 경험을 향상시킬 수 있습니다.

기본적인 CSS 애니메이션 속성과 @keyframes의 사용법을 이해했다면, 이제 자신만의 애니메이션을 디자인하여 웹 페이지를 더욱 매력적으로 만들어보세요. 다양한 실습을 통해 CSS 애니메이션의 가능성을 탐구해보는 것도 좋은 방법입니다.

'CSS' 카테고리의 다른 글

CSS 변형(Transform) 속성 - 회전, 스케일, 이동 등의 변형 속성 사용법 (0)	2024.08.10
반응형 웹 디자인을 위한 CSS 기법 - 미디어 쿼리를 활용한 반응형 디자인 구현 (0)	2024.08.10
CSS 레이아웃: Grid 소개 - CSS Grid를 이용한 레이아웃 구성 방법 (0)	2024.08.10
CSS 레이아웃: Flexbox 소개 - Flexbox의 기본 개념과 사용 예시 (0)	2024.08.10
텍스트 스타일링: 글꼴과 폰트 속성 - CSS를 이용한 텍스트 꾸미기 기초 (0)	2024.08.10

CodeCrafted