animation

Ryuzy 2025. 4. 6. 19:40

728x90

1. animation

animation은 CSS에서 요소에 움직임(애니메이션 효과)을 부여할 수 있는 속성으로, 시간에 따라 스타일이 자연스럽게 변하도록 만듭니다. @keyframes 규칙을 사용하여 시작부터 끝까지의 상태를 정의하고, animation-name, animation-duration, animation-timing-function 등의 속성을 조합하여 반복 여부, 속도, 지연 시간 등을 설정할 수 있습니다. 예를 들어, 박스를 점점 커지게 하거나, 색을 서서히 바꾸거나, 계속 회전하게 만드는 등 다양한 시각적 효과를 줄 수 있습니다. CSS만으로도 부드럽고 다채로운 인터랙션을 만들 수 있기 때문에 웹 디자인에서 자주 사용됩니다.

@keyframes

@keyframes는 CSS에서 애니메이션의 “동작 단계”를 정의하는 문법입니다. 어떤 요소가 어떻게 변화할지, 언제 어떤 상태가 될지를 순서대로 알려주는 역할을 합니다.

@keyframes 애니메이션이름 {
  from {
    /* 시작 상태 */
  }
  to {
    /* 끝 상태 */
  }
}

@keyframes 애니메이션이름 {
  0%   { ... }
  50%  { ... }
  100% { ... }
}

주요 속성 설명

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>점프하는 공 애니메이션</title>
  <style>
    body {
      background: linear-gradient(to top, #a0e9ff, #ffffff);
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      overflow: hidden;
      margin: 0;
    }

    .ball {
      width: 80px;
      height: 80px;
      background-color: #ff6b6b;
      border-radius: 50%;
      box-shadow: 0 5px 15px rgba(0,0,0,0.3);
      animation: bounce 1s infinite ease-in-out;
    }

    @keyframes bounce {
      0% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-200px);
      }
      100% {
        transform: translateY(0);
      }
    }
  </style>
</head>
<body>
  <div class="ball"></div>
</body>
</html>

2. CSS 그라디언트

gradient(그라디언트)는 두 가지 이상의 색상이 자연스럽게 섞여서 부드럽게 변하는 배경 효과입니다. CSS에서 배경으로 사용할 수 있으며, 이미지 파일 없이도 예쁘고 가벼운 배경을 만들 수 있습니다.

1. linear-gradient (선형 그라디언트)

색상이 한 방향(직선 방향)으로 변하는 그라디언트입니다.

background: linear-gradient(방향, 색1, 색2, 색3, ...);

background: linear-gradient(red, yellow);

red → yellow로 위에서 아래 방향으로 색이 변함
기본 방향은 top to bottom (180deg)

background: linear-gradient(to right, blue, pink);

to right : 왼쪽에서 오른쪽으로 색상 전개
blue → pink

background: linear-gradient(to bottom right, #00f, #0ff);

왼쪽 위 → 오른쪽 아래 방향으로 파란색에서 변화

background: linear-gradient(45deg, red, orange, yellow);

45deg : 왼쪽 아래에서 오른쪽 위로 올라가는 방향

2. radial-gradient (원형 그라디언트)

색상이 원 또는 타원 형태로 중심에서 바깥쪽으로 퍼지는 그라디언트입니다.

background: radial-gradient(모양 및 위치, 색1, 색2, ...);

background: radial-gradient(circle, lightblue, blue);

가운데는 lightblue, 바깥으로 갈수록 blue
기본 위치는 중앙

background: radial-gradient(ellipse, pink, purple);

ellipse : 타원 형태로 퍼짐

background: radial-gradient(circle at top left, yellow, red);

왼쪽 위를 중심으로 원형 그라디언트 적용

3. animation 활용

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>여러 보상 아이템 애니메이션</title>
    <style>
      body {
        background-color: #222;
        height: 100vh;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: "Segoe UI", sans-serif;
      }

      .container {
        display: flex;
        gap: 20px;
      }

      .reward {
        width: 100px;
        height: 100px;
        background: radial-gradient(circle at center, gold, orange);
        border-radius: 50%;
        box-shadow: 0 0 15px gold;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 20px;
        font-weight: bold;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
        opacity: 0;
        transform: scale(0.3);
        animation: popUp 1.2s ease-out forwards, glow 2s infinite alternate;
      }

      /* 각 보상마다 등장 시점 조금씩 다르게 */
      .reward:nth-child(1) {
        animation-delay: 0s, 0s;
      }
      .reward:nth-child(2) {
        animation-delay: 0.3s, 0s;
      }
      .reward:nth-child(3) {
        animation-delay: 0.6s, 0s;
      }

      @keyframes popUp {
        0% {
          transform: scale(0.3);
          opacity: 0;
        }
        50% {
          transform: scale(1.15);
          opacity: 1;
        }
        100% {
          transform: scale(1);
          opacity: 1;
        }
      }

      @keyframes glow {
        0% {
          box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
        }
        100% {
          box-shadow: 0 0 30px rgba(255, 215, 0, 1);
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="reward">+100💰</div>
      <div class="reward">+50⭐</div>
      <div class="reward">+1🎁</div>
    </div>
  </body>
</html>

nth-child란?

CSS에서 :nth-child(n)는 부모 요소의 자식 중 몇 번째 요소인지를 기준으로 선택할 수 있게 해주는 선택자(selector)입니다.

728x90