❓ CSS transform

🐋 요소의 회전, 크기, 기울기, 위치( 이동 효과 ) 등을 변형하여 다양한 시각적 효과 구현

.class {
	transform: rotate(30deg);
	transform: scale(1.2);
	transform: skew(20deg, 25deg); /* x축, y축 */
	transform: translate(10px, 20px); /* x축, y축 */
}

✔️ rotate()

• 입력한 각도만큼 회전
  • 양수: 시계 방향 회전
  • 음수: 반시계 방향 회전
• 단위: deg, turn

✔️ scale()

• 입력한 배율만큼 확대 및 축소
  • 양수: 배율로 확대
  • 음수: 해당 축으로 뒤집으면서 확대
• 단위: 배율( 0.1, 1.2, 3 … )

✔️ skew()

• 입력한 각도만큼 비틂
• X, Y축
• 단위: deg, rad

✔️ translate()

• 입력한 만큼 위치 변경
• 단위: px, em, %, in, …

❗️ translate/scale vs position/width/height

• translate / scale
  • 원래의 위치를 기준으로 동작
  • 문서 흐름 상 원래 위치에 존재하는 것 처럼 보임
    • 부모 요소에 영향을 주지 않음
    • 문서의 흐름과 관계 없이 독립적으로 조정
• position / width / height
  • 문서의 흐름을 벗어남
  • 문서 흐름 상 원래 위치에 공간을 차지하지 않음
    • 부모 요소에 영향을 줌

❓ CSS transition

🐋 CSS 속성이 변경될 때 적용되는 애니메이션
스타일 변경이 생겼을 때, 애니메이션처럼 변형이 매끄럽게 이루어지게 한다.

.class {
	transition: property duration timing-function delay;
	/* example
		transition: border 0.2s linear 1s,
								background-color: 0.2s ease-in;
	*/
}

✔️ transition

• 다른 transition 속성을 이용한 스타일을 한 줄에 설정, 축약형

✔️ transition-property

• 효과를 적용하고자 하는 CSS 속성

✔️ transition-duration

• 효과의 지속 시간( default = 0 )

✔️ transition-timing-function

• 효과의 타이밍 함수
  • ease: default, 처음과 끝은 느리고 중간은 빠르게 변화
  • linear: 시작부터 끝까지 일정한 속도로 변화
  • ease-in: 처음에는 느리게, 나머지는 일정한 속도로 변화
    • 주로 요소가 나타나는 효과 구현
  • ease-out: 처음에는 일정한 속도, 나머지는 느리게 변화
    • 주로 요소가 사라지는 효과 구현
  • ease-in-out: 처음과 끝은 느리고 중간은 빠르게 변화
    • ease 보다 더욱 급격한 변화
    • 주로 요소가 나타나고 사라지는 효과를 구현할 때 사용

✔️ transition-delay

• 효과가 나타나기 전 지연 시간

✔️ ,

• property 나열 시에는 ,로 구분하여 작성

---

❓ Animation

🐋 스타일의 변화를 통해 애니메이션을 표현
duaration 과 delay 순서 작성에 주의 !!

❗️ Animation 정의하기

@keyframes animation-name {
	from {
		/* 애니메이션 시작할 때의 상태 */
	}
	to {
		/* 애니메이션 동작 후의 상태 */
	}
}

@keyframes animation-name {
	0% {
	}
	50% {
	}
	100% {
	}
}

✔️ %

• 총 duration 기준
  • 0%: 시작 프레임 속성 값 지정
  • n%: n% 진행된 프레임 속성 값 지정
  • 100%: 끝 프레임 속성 값 지정

✔️ from ~ to

• from: 시작 프레임 속성 값 지정
• to: 끝 프레임 속성 값 지정

❗️ Animation 사용하기

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

❗️ Animation Properties

✔️ animation

• 다른 animation 속성을 이용한 스타일을 한 줄에 설정할 수 있음

✔️ animation-name

• 적용할( @keyframe으로 정의된 ) 이름

✔️ animation-duration

• 한 사이클 지속 시간

✔️ animation-timing-function

• 각 사이클의 타이밍 함수
• transition 과 동일

✔️ animation-delay

• 시작 전 지연 시간

✔️ animation-iteration-count

• 재생 횟수
  • infinite: 무한 반복
  • 숫자 기입( 소수도 가능 )

✔️ animation-direction

• 앞으로, 뒤로 또는 앞뒤로 번갈아 같은 재생되는 방향
  • normal: from → to
  • alternate: from → to → from
  • reverse: to → from
  • alternate-reverse: to → from → to

✔️ animation-fill-mode

• 실행 전과 후의 스타일 적용 방법
  • none: default
  • forwards: 애니메이션 후 마지막 스타일 유지
  • backwards: 애니메이션 전 첫번째 스타일 유지
  • both: forwards + backwards

✔️ animation-play-state: 재생 / 일시 정지 여부

---

❗️ transition vs animation

• transition
  • 초기 상태에서 최종 상태로만 정의 가능
  • 중간 상태 제어 불가능
  • 속성값이 변경되었을 경우에만 실행
• animation
  • @keyframes를 사용하여 중간 단계 구현 가능( % 사용 )
  • 다양한 속성을 활용하여 transition 보다 복잡한 애니메이션 구현 가능