[CSS] 스타일 속성 - transform, transition, animation(@keyframes)

1. Transform (변형)

• 요소의 위치 이동, 회전, 크기 변경, 기울이기 등을 수행하는 속성
• 레이아웃에 영향을 주지 않고 시각적으로만 변형
• 여러 변형을 한 줄에 함께 적용 가능

함수	설명	예시
translate(x,y)	요소 위치 이동	translate(100px, 50px)
translateX(x)	X축 이동	translateX(100px)
translateY(y)	Y축 이동	translateY(50px)
scale(n)	요소 확대 / 축소	scale(1.5)
scaleX(n)	가로 확대	scaleX(2)
scaleY(n)	세로 확대	scaleY(0.5)
rotate(angle)	회전	rotate(45deg)
skew(angle)	기울이기	skew(20deg)
skewX(angle)	X축 기울이기	skewX(20deg)
skewY(angle)	Y축 기울이기	skewY(20deg)

div {
  transform:translate(100px,50px); /* 요소를 오른쪽 100px, 아래 50px 이동 */
  transform: rotate(45deg); /* 요소를 45도 회전 *****/
  transform: scale(1.5); /* 요소를 1.5배 확대 */
  transform: translate(100px,50px) rotate(45deg) scale(1.5);
}

 

2. Transition (속성 변화 효과)

• CSS 속성 값이 변경될 때 부드럽게 변화하도록 하는 속성
• 보통 :hover, :focus, :active 상태와 함께 사용

속성	설명
transition	여러 transition 속성을 한번에 지정
transition-property	변화할 속성 지정
transition-duration	변화 지속 시간
transition-timing-function	변화 속도 방식
transition-delay	변화 시작 지연 시간

1) transition-timing-function 값

속성값	설명
ease	천천히 시작 → 빠르게 → 천천히 끝
linear	일정한 속도
ease-in	천천히 시작
ease-out	천천히 끝
ease-in-out	천천히 시작 → 천천히 끝

div {
  width:100px;
  height:100px;
  background:red;
  transition: width 1s; /* 마우스를 올리면 width가 1초 동안 부드럽게 변화 */
}

div:hover {
  width:200px;
}

div {
  transition: transform 0.5s;
}

div:hover {
  transform: scale(1.2); /* 요소에 마우스를 올리면 부드럽게 확대 */
}

 

3. Animation (애니메이션)

• CSS에서 자동으로 반복되는 움직임을 만드는 속성
• @keyframes와 함께 사용

속성	설명
animation	여러 animation 속성을 한번에 지정
animation-name	애니메이션 이름
animation-duration	실행 시간
animation-timing-function	속도 방식
animation-delay	시작 지연
animation-iteration-count	반복 횟수
animation-direction	진행 방향
animation-fill-mode	종료 후 상태

 

1) animation-direction 값

속성값	설명
normal	기본 방향
reverse	반대 방향
alternate	왕복 실행
alternate-reverse	반대 방향 왕복

 

2) animation-iteration-count 값

속성값	설명
숫자	반복 횟수
infinite	무한 반복

3) keyframes 정의

@keyframes animationName {
  from { 속성 }
  to { 속성 }
}

또는

@keyframes animationName {
  0% { 속성 }
  50% { 속성 }
  100% { 속성 }
}

@keyframes moveBox {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

div {
/* 요소가 오른쪽으로 이동하는 애니메이션을 2초 동안 실행하고 무한 반복 */
  animation: moveBox 2s infinite;  
}

 

⚠️ 같은 속성을 여러 번 정의한다면?
- 우선순위가 높거나 나중에 정의한 값이 적용됨