Transition

css transition example

• css 속성의 시작과 끝을 지정(전환 효과)해서 중간 값을 애니메이션

  transition

transition-property

• 전환 효과를 사용할 속성 이름을 설정

  transition-property

transition-duration

• 전환 효과의 지속시간을 설정

  transition-duration

transition-timing-function

• 타이밍 함수(애니메이션 전환 효과를 계산하는 방법) 지정

  transition-timing-function

animation-timing-function - CSS: Cascading Style Sheets | MDN

Transition Timing Functions < CSS | The Art of Web

transition-delay

• 전환 효과가 몇 초 뒤에 시작할지 대기시간을 설정

  transition-delay

Transform

• 요소의 변환 효과(변형)를 지정

  transform: 변환함수1 변환함수2 변환함수3 ...;
  transform: 원근법 이동 크기 회전 기울임;
  

  .box {
  	transform: rotate(20deg) translate(10px, 0);
  }
  

transform 2D 변환 함수

css transform example

transform 비틀기 효과 주는 방법 - skew