CSS 7일차 전환(transition)/애니메이션(animation)/변형(transform) /overflow

 

---

6.6 전환 효과 속성 (Transition)

1. 전환(Transition)이란

• CSS 속성 값이 한 값에서 다른 값으로 변경될 때 그 변화를 부드럽게 표현하는 효과
• 주로 :hover, :focus 등 상태 변화와 함께 사용

---

2. transition-property

• 전환 효과를 적용할 속성 이름을 지정

형식

transition-property: <속성값>;

속성값

• none : 전환 효과 적용 안 함
• all : 모든 속성에 전환 효과 적용
• 특정 속성 : width, height, background-color 등

---

3. transition-duration

• 전환 효과가 진행되는 시간 지정

형식

transition-duration: <시간>;

• 단위: s, ms
• transition-property와 반드시 함께 사용해야 함

---

4. transition-delay

• 전환 효과가 시작되기 전 지연 시간 지정

형식

transition-delay: <시간>;

---

5. transition-timing-function

• 전환 효과의 속도 변화 방식 지정

형식

transition-timing-function: <속성값>;

속성값

• linear : 일정한 속도
• ease : 점점 빨라졌다가 느려짐
• ease-in : 느리게 시작 → 점점 빨라짐
• ease-out : 빠르게 시작 → 점점 느려짐
• ease-in-out : 느리게 → 빠르게 → 느리게
• cubic-bezier(p1,p2,p3,p4) : 사용자 정의 속도

---

6. transition 단축 속성

• 모든 전환 속성을 한 줄로 지정

형식

transition: <property> <duration> <timing-function> <delay>;

---

6.7 애니메이션 속성 (Animation)

1. 애니메이션 개요

• 요소가 시작부터 끝까지 여러 단계의 스타일 변화를 가질 수 있음
• 중간 변화 지점을 키 프레임(keyframe) 이라고 함

---

2. 키 프레임 정의

• 애니메이션 전체 동작을 정의

형식

@keyframes 애니메이션명 {
  0% { }
  n% { }
  100% { }
}

• from = 0%
• to = 100%

---

3. animation-name

• 적용할 키 프레임 이름 지정

animation-name: <키프레임명>;

---

4. animation-duration

• 애니메이션 실행 시간

animation-duration: <시간>;

※ 키프레임, animation-name, animation-duration 중 하나라도 없으면 실행되지 않음

---

5. animation-delay

• 애니메이션 시작 전 지연 시간

animation-delay: <시간>;

---

6. animation-fill-mode

• 애니메이션 실행 전 / 종료 후 상태 지정

값실행 전실행 후

none	기본 스타일	기본 스타일
forwards	기본 스타일	종료 상태 유지
backwards	시작 상태 적용	기본 스타일
both	시작 상태 유지	종료 상태 유지

---

7. animation-iteration-count

• 애니메이션 반복 횟수

animation-iteration-count: <횟수>;

• 숫자 또는 infinite

---

8. animation-play-state

• 애니메이션 실행 상태

animation-play-state: running | paused;

---

9. animation-direction

• 애니메이션 진행 방향

속성값

• normal : 정방향
• reverse : 역방향
• alternate : 정방향 ↔ 역방향 반복
• alternate-reverse : 역방향 ↔ 정방향 반복

---

10. animation 단축 속성

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

---

6.8 변형 효과 (Transform)

1. transform 개요

• 요소의 위치, 크기, 회전, 기울기 변경
• 2차원 / 3차원 변형 가능

---

2. transform 속성

transform: <함수>;

2차원 이동

• translate(x, y)
• translateX(n)
• translateY(n)

2차원 확대/축소

• scale(x, y)
• scaleX(n)
• scaleY(n)

2차원 기울이기

• skew(xdeg, ydeg)
• skewX(deg)
• skewY(deg)

2차원 회전

• rotate(deg)

---

3. transform-origin

• 변형 효과의 기준점 지정

transform-origin: <x축> <y축>;

값

• x축: left / center / right
• y축: top / center / bottom

---

overflow 속성

overflow란

• 콘텐츠가 요소 영역을 초과했을 때 처리 방식 지정

---

overflow 속성값 정리

값설명

visible	잘리지 않고 그대로 표시
hidden	영역 밖 콘텐츠 잘림, 스크롤 불가
clip	hidden과 유사하나 스크롤도 완전히 불가
scroll	항상 스크롤바 표시
auto	넘칠 경우에만 스크롤바 표시
overlay	스크롤바가 콘텐츠 위에 겹쳐 표시 (일부 브라우저)

---

---

---