TIL no.02 - CSS - 변형 & 애니메이션

1. CSS 변형

속성 이름	설명
transition	모든 transition 속성을 한 번에 적용
transition-delay	이벤트 발생 후 몇 초 후에 재생할지 지정
transition-duration	몇 초 동안 재생할지 지정
transtion-property	어떤 속성을 변형할지 지정
transition-timing-function	수치 변형 함수 지정

• transition: property duration timing-function delay;
  
  

transtion-timing-function 속성

• linear
• ease
• ease-in
• ease-out
• ease-in-out
  
  

---

2. 애니메이션 스타일 속성

속성 이름	설명
animation	모든 애니메이션 속성을 한 번에 적용
animation-delay	이벤트 발생 후 몇 초 후에 재생할지 지정
animation-direction	애니메이션의 진행 방향 설정
animation	애니메이션을 몇 초 동안 재생할지 지정
animation-iteration-count	애니메이션의 반복 횟수 지정
animation-name	애니메이션 이름 지정
animation-play-state	애니메이션 재생 상태 지정
animation-timing-function	적용할 수치 변형 함수 지정

2.1. 키 프레임 규칙

• 키 프레임 규칙(Keyframes @-rule)
  • CSS3에서 애니메이션을 지정하는 형식
  • 키 프레임 안에는 퍼센트 단위로 애니메이션을 적용
  • 예외적으로 0%와 100%의 경우 from 키워드와 to 키워드 사용

...
@keyframes name {
  from {...}
  to {...}
}

---

3. transform 속성과 2차원 변환

• HTML 요소를 변환하는 스타일 속성

2차원 변환 함수	설명
rotate()	지정한 각도만큼 회전
scale()	지정한 크기만큼 확대 혹은 축소 (x축과 y축의 별도 함수 제공)
translate()	지정한 크기만큼 이동 (x축과 y축의 별도 함수 제공)
skew()	지정한 각도만큼 기울임 (x축과 y축의 별도 함수 제공)

transform: rotate(30deg) scale(1.2) skew(10deg);

3.1. transform-origin 속성

• 변환 중심을 설정하는 스타일 속성

속성 값	설명
Length	크기 단위 혹은 퍼센트로 위치 지정
top	(대상 요소의) 위쪽 끝
right	오른쪽 끝
bottom	아래쪽 끝
left	왼쪽 끝
center	가운데

transform-origin: right bottom;

3.2. 요소의 화면 중앙 배치

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);