[TIL] CSS: 웹에 생동감을 더하는 transform, transition, animation 가이드

• CSS transform 속성 - 레이아웃 흐름을 방해하지 않고 요소의 형태와 위치를 시각적으로 변형하는 기법
• CSS transition 속성 - CSS 속성값 변화를 일정한 시간에 걸쳐 부드럽게 전환하는 애니메이션 가교 역할
• CSS Animation 속성 - 키프레임을 활용하여 다단계의 복잡하고 반복적인 움직임을 구현하는 설계 방식
• CSS translate 중앙 정렬 기법 - 요소의 크기에 구애받지 않고 화면 정중앙에 배치하는 실무 레이아웃 공식
• CSS 이징(Easing)의 개념 - 속도의 변화를 제어하여 애니메이션에 리듬감과 자연스러움을 부여하는 기술

---

 

CSS transform 

정적인 요소를 움직이고 회전시키는 transform 속성은 웹 디자인에 생동감을 불어넣어준다.

 

---

transform의 정의 

요소가 페이지의 일반적인 레이아웃 흐름을 방해하지 않으면서 모양, 크기, 위치를 시각적으로만 변경하는 속성이다.

주변 요소에 영향을 주지 않아 애니메이션 구현에 매우 효율적이다.

 

중요 함수

translate - 요소를 현재 위치에서 지정한 거리만큼 이동시킴

scale - 요소를 지정한 배수만큼 확대 또는 축소함 (1보다 크면 확대, 작으면 축소)

rotate - 요소를 지정한 각도만큼 회전시킴

skew - 요소를 지정한 각도만큼 비틀어서 왜곡함

 

 

 

함께 사용하는 중요 속성

함수 외에도 변형의 기준이나 방식을 정하는 중요한 속성들이 있다.

 

transform-origin - 변형이 시작되는 기준점을 정함 (기본값 정중앙50% 50%이지만, 왼쪽 위나 오른쪽 아래 등으로 변경 가능)

transition - 변형이 일어날 때 부드럽게 변하는 과정을 보여줌 (애니메이션 표과의 필수 파트너)

 

---

 

[표] transform 함수 요약표

함수	역할	단위	예시
translate	위치 이동	px %	translateX(50px)
scale	크기 조절	배수	scale(1.5)
rotate	회전	deg	rotate(180deg)
skew	기울기 비틀기	deg	skewY(20deg)

 

 

---

 

[예제 코드] 마우스를 올리면 변하는 호버 효과 및 복합 변형

CSS

 

/* 부드러운 변화를 위한 transition 기본 세팅 */
.box {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  transition: transform 0.3s ease;
}

/* 마우스 오버 시 이동, 확대, 회전 동시 적용 */
.box:hover {
  transform: translate(20px, 0) scale(1.2) rotate(10deg);
}

/* 스큐 비틀기 단독 적용 예시 */
.skew-box {
  transition: transform 0.3s;
}
.skew-box:hover {
  transform: skewX(20deg);
}

 

 

학습 정리

transform은 요소의 물리적 공간을 차지하지 않고 시각적인 형태만 바꾼다.

여러 함수를 공백으로 구분하여 동시에 적용할 수 있다.

transition과 결합하면 복잡한 자바스크립트 없이도 멋진 애니메이션을 만들 수 있다.

 

---

CSS transition 속성

 

transition은 스타일 속성이 변경될 때 그 변화를 일정 시간에 걸쳐 일어나게 하여 애니메이션 효과를 만들어낸다.

---

transition의 정의와 핵심 속성

상태 변화가 즉시 일어나지 않고 일정한 시간 동안 부드럽게 전환되도록 제어하는 속성이다.

 

핵심 속성

transition-property - 변화를 감시하고 적용할 대상 속성을 정함 (예: background-color, transform, all)

transition-duration - 애니메이션이 재생될 지속 시간을 설정함  (단위: s 또는 ms) [필수]

transition-timing-function - 변화의 속도 곡선과 리듬을 정함  (예: 서서히 시작하다 빨라짐)

transition-delay - 변화가 시작되기 전 대기 시간을 설정함

 

---

 

중요 타이밍 함수

움직임의 느낌을 결정하는 중요한 요소이다.

 

ease - 천천히 시작해서 빨라졌다가 다시 천천히 끝남

linear - 처음부터 끝까지 일정한 속도로 움직임

ease-in - 천천히 시작해서 속도가 붙으며 끝남

ease-out - 빠르게 시작해서 끝날 때 천천히 멈춤

cubic-bezier(n,n,n,n) - 나만의 고유한 속도 곡선을 직접 수치로 정의함

 

 

 

 

---

 

[표] transition 속성별 상세 요약표

세부 속성	설명	예시
property	변화를 감시할 CSS 속성	opacity width all
duration	애니메이션 재생 시간	0.3s 500ms
timing-function	속도의 흐름 가속도	linear ease-in
delay	실제 시작까지 기다리는 대기 시간	1s

 

---

 

[예제 코드] transition 단축 속성과 다중 속성 제어

CSS

 

.button {
  width: 150px;
  height: 50px;
  background-color: #3498db;
  /* 단축 속성: 모든 속성을 0.5초 동안 부드럽게 전환 */
  transition: all 0.5s ease-in-out;
}

.button:hover {
  background-color: #2ecc71; 
  width: 200px;              
  border-radius: 25px;       
  transform: scale(1.1);      
}

/* 속성마다 다른 시간과 대기 시간 적용하기 */
.complex-box {
  background-color: gray;
  transition: width 0.3s ease, background-color 2s 1s linear;
}

 

 

 

학습 정리

지속 시간 설정(duration)이 없으면 기본값이 0이므로 아무 효과가 나타나지 않는다.

all 키워드를 사용하면 모든 변경 가능한 속성에 자동으로 효과가 적용된다.

마우스 호버뿐만 아니라 자바스크립트로 클래스를 추가/제거할 때도 transition은 작동한다.

 

all 키워드: transition-property: all;이라고 쓰면 모든 수치형 CSS 속성에 효과가 적용되어 편리하다.

반대 방향: 마우스를 뗐을 때도 부드럽게 돌아오는 이유는 transition이 :hover가 아닌 원래의 클래스 상태에 정의되어 있기 때문이다.

---

 

CSS Animation 속성

단순한 상태 변화를 넘어 웹 요소에 연속적이고 자율적인 생명력을 불어넣는 CSS Animation

 

---

@keyframes (애니메이션의 설계도)

애니메이션을 만들려면 먼저 시간의 흐름에 따른 스타일 변화를 정의해야 하는데, 이를 @keyframes라고 부릅니다.

정의: 애니메이션의 이름과 각 시점(%)별 스타일을 지정합니다.
시점: 0%(시작, from)부터 100%(끝, to)까지 원하는 구간을 쪼개어 설정할 수 있습니다.

 

CSS

@keyframes slideAndColor {
  0% { transform: translateX(0); background-color: red; }
  50% { transform: translateX(200px); background-color: yellow; }
  100% { transform: translateX(0); background-color: red; }
}

 

---

Animation의 핵심 속성들

설계도를 만들었다면, 이제 어떤 요소에 적용할지 속성을 통해 결정합니다.

animation-name: 사용할 @keyframes의 이름을 지정합니다.
animation-duration: 애니메이션 한 주기가 완료되는 데 걸리는 시간입니다.
animation-timing-function: 속도 변화의 흐름(linear, ease, ease-in-out 등)을 정합니다.
animation-iteration-count: 반복 횟수를 정합니다. 숫자나 infinite(무한)를 사용합니다.
animation-direction: 진행 방향을 정합니다. (normal, reverse, alternate 등)

 

---

중요 함수 및 제어 속성

움직임을 더 정교하게 제어하는 설정들입니다.

animation-fill-mode: 애니메이션이 끝나기 전과 후에 요소의 상태를 어떻게 유지할지 정합니다. (forwards를 쓰면 끝난 상태 그대로 멈춥니다.)
animation-play-state: 애니메이션을 일시 정지(paused)하거나 재생(running)합니다. 주로 자바스크립트로 제어할 때 유용합니다.

 

실전 예제 코드: "통통 튀는 공"

단축 속성(Shorthand)을 사용하여 여러 설정을 한 줄로 표현하는 것이 일반적입니다.
구조: animation: 이름 시간 타이밍 대기시간 횟수 방향;

CSS
 

/* 1. 애니메이션 설계도 만들기 */
@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-50px); }
  100% { transform: translateY(0); }
}

.ball {
  width: 50px;
  height: 50px;
  background-color: #3498db;
  border-radius: 50%;
  
  /* 2. 애니메이션 적용하기 */
  /* 이름(bounce), 0.6초간, 부드럽게(ease-in-out), 무한반복(infinite) */
  animation: bounce 0.6s ease-in-out infinite;
}

 

 

---

 

[표] animation 속성별 예제 모음표

속성	코드 예시	설명
Iteration	animation-iteration-count: 3;	지정한 횟수만큼 움직이고 정지함
Direction	animation-direction: alternate;	지정한 방향으로 왕복 운동함
Fill-mode	animation-fill-mode: forwards;	애니메이션 종료 후 마지막 상태를 유지함
Play-state	animation-play-state: paused;	동작 중인 애니메이션을 일시 정지함

 

---

 

[예제 코드] 키프레임을 활용한 통통 튀는 공 애니메이션

CSS

 

/* 1. 애니메이션 시나리오 설계 */
@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-50px); }
  100% { transform: translateY(0); }
}

/* 2. 요소에 애니메이션 적용 (단축 속성) */
.ball {
  width: 50px;
  height: 50px;
  background-color: #3498db;
  border-radius: 50%;
  
  /* 이름 지속시간 타이밍 무한반복 */
  animation: bounce 0.6s ease-in-out infinite;
}

/* 마우스 오버 시 애니메이션 일시 정지 */
.ball:hover {
  animation-play-state: paused;
}

 

---

 

학습 정리

**@keyframes**는 애니메이션의 '시나리오'이고, animation 속성은 이를 '실행'하는 설정이다.
**infinite**를 활용하면 로딩 바처럼 계속 돌아가는 효과를 쉽게 만든다.
alternate 방향 설정은 왕복 애니메이션을 만들 때 keyframes를 절반만 써도 되게 해준다.

 

---

CSS translate 중앙 정렬 기법

 

 

 

위치 기반 완벽한 중앙 정렬

요소의 가로세로 크기가 변하더라도 항상 화면 정중앙에 위치하도록 만드는 실무 필수 기법이다.

중앙 정렬 동작 원리

top 50% left 50% - 박스의 왼쪽 상단 꼭짓점을 부모 화면의 정중앙에 가져다 놓음

translate(-50% -50%) - 박스 자신의 너비와 높이 절반만큼 역으로 당겨 중심을 정확히 보정함

 

 

 

[예제 코드] Position과 Translate를 결합한 정중앙 배치

HTML

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Translate 중앙 정렬 예제</title>
    <style>
        /* 1. 화면 전체를 꽉 채우는 컨테이너 */
        .container {
            width: 100vw;
            height: 100vh;
            position: relative;
            background-color: #f8f9fa;
        }

        /* 2. 중앙에 위치할 노란 박스 */
        .yellow-box {
            width: 150px;
            height: 150px;
            background-color: #ffeb3b; /* 노란색 */
            border: 3px solid #333;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;

            /* [중앙 정렬의 핵심] */
            position: absolute;
            top: 50%;      /* 부모 높이의 50% 지점으로 이동 */
            left: 50%;     /* 부모 너비의 50% 지점으로 이동 */
            transform: translate(-50%, -50%); /* 박스 크기의 절반만큼 역이동하여 중심 보정 */
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="yellow-box">중앙 박스</div>
    </div>

</body>
</html>

 

---

CSS transition-timing-function

CSS 애니메이션에서 이징은 한마디로 속도의 변화

물체가 움직일 때 처음부터 끝까지 일정한 속도로 움직이는 것이 아니라, 현실 세계의 물체처럼 서서히 가속하거나 감속하며 리듬감을 주는 기술

 

---

 

주요 이징 종류 (Timing Function)

CSS에서는 transition-timing-function 또는 animation-timing-function 속성을 통해 이징을 조절한다.

상황에 맞춰 다양한 속도 변화 곡선을 적용할 수 있다.

 

linear - 시작부터 끝까지 일정한 속도로 움직인다. (로딩 바 등에 주로 사용)

ease - 기본값으로, 처음엔 천천히 시작했다가 중간에 빨라지고 끝날 때 다시 느려진다.

ease-in - 천천히 시작해서 점점 빨라진다. (화면 밖으로 나가는 요소에 적합)

ease-out - 빠르게 시작해서 천천히 멈춘다. (화면 안으로 들어오는 팝업이나 메뉴에 적합)

ease-in-out - 천천히 시작하고 중간에 빨랐다가 다시 천천히 끝난다.

 

---

 

[표] 타이밍 함수별 특징 요약표

타이밍 함수	속도 변화 특징	추천 활용처
linear	등속 운동 (일정함)	무한 반복되는 로딩 애니메이션
ease	느림-빠름-느림 (기본값)	일반적인 호버(Hover) 효과
ease-in	느림-빠름 (가속)	화면 밖으로 퇴장하는 요소
ease-out	빠름-느림 (감속)	화면 안으로 등장하는 요소 및 팝업
ease-in-out	느림-빠름-느림 (대칭)	부드럽게 반복되는 전환 효과

 

---

 

[예제 코드] 타이밍 함수별 움직임 비교

HTML

 

<style>
  .box {
    width: 150px;
    height: 50px;
    margin: 10px;
    background-color: #3498db;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 2초 동안 위치를 이동시키는 트랜지션 설정 */
    transition: transform 2s;
  }

  .container:hover .box {
    transform: translateX(400px);
  }

  /* 이징 부여 */
  .linear { transition-timing-function: linear; }
  .ease-in { transition-timing-function: ease-in; }
  .ease-out { transition-timing-function: ease-out; }
</style>

<div class="container">
  <div class="box linear">Linear (일정하게)</div>
  <div class="box ease-in">Ease-In (가속)</div>
  <div class="box ease-out">Ease-Out (감속)</div>
</div>

 

 

---

 

나만의 속도 만들기 (cubic-bezier)

미리 정해진 값 외에 원하는 독특한 움직임을 직접 커스텀할 때 사용한다.

 

사용자 정의 함수

cubic-bezier - 4개의 좌표값(x1, y1, x2, y2)을 통해 가속도 곡선을 직접 그리는 함수이다.

활용법 - 공이 튀어 오르는 듯한 효과나 아주 급격한 가속도를 만들 때 유용하며, 일반적으로 이징 전문 사이트에서 그래프를 조절한 뒤 코드를 복사하여 사용한다.

 

 

 

참고 자료

이징 커스텀 사이트 1: easings.net (https://easings.net/ko#)

이징 커스텀 사이트 2: Ceaser (https://matthewlein.com/tools/ceaser)

이징 커스텀 사이트 3: cubic-bezier.com

---