Transition & Transform & Animation

Transition

Transition속성은 CSS속성을 변경할때 애니메이션 속도를 조절하는 방법을 제공한다.
단축속성으로 사용할 경우 지속시간을 필수속성으로 가져야한다.

div{
	transition: <property> <duration> <timeing-function> <delay>
}

모든 프로퍼티가 트랜지션의 대상이 될 수 없다. (ex. display는 불가능)

//Box model
	width height padding margin border

//Background
	background-color background-position

//text
	color font-size font-weight letter-spacing line-height text-indent text-shadow vertical-align word-spacing

// 기타
	opacity outline visibility z-index position(top left right bottom)

timing-function
ease(기본값) : 천천히 시작해 빨라졌다 다시 느려진다.
linear : 일정한 속도로 진행된다.
ease-in : 천천히 시작된다.
ease-out : 천천히 끝난다.
ease-in-out : 천천히시작해 천천히 끝난다

Transform

Transform속성은 요소를 회전, 크기조정, 기울기 또는 위치를 변경할 수 있다.

/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn); rotate3d(1, 2.0, 3.0, 10deg); rotateX(10deg); rotateY(10deg); rotateZ(10deg);
transform: translate(12px, 50%); translate3d(12px, 50%, 3em); translateX(2em); translateY(3in); translateZ(2px);
transform: scale(2, 0.5); scale3d(2.5, 1.2, 0.3); scaleX(2); scaleY(0.5); scaleZ(0.3);
transform: skew(30deg, 20deg); skewX(30deg); skewY(1.07rad);

• matrix : translate(이동), skew(기울기), rotate(회전), scal(확대)를 행렬로 표시한다.

• perspective : 사용자와 평면 사이의 거리를 설정한다.(원근법)
  기준점을 지정해주기위해 perspective-origin을 같이 사용해야한다.
  제일 앞에 작성되어야 한다.

Animation

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

• animation-name : @keyframes규칙의 이름을 지정한다.
  (숫자나 특수문자로 시작하는 이름은 불가능하다.)
• animation-duration : 애니메이션의 지속시간을 설정한다.
• timing-function : 중간 상태의 전환 시간간격을 설정한다.
• delay : 대기시간을 설정한다.
• iteration-count : 애니메이션의 반복을 설정한다.
• direction : 반복 방향을 설정한다.
  • normal : 정방향
  • reverse : 역방향
  • alternate : 정방향에서 역방향 왕복
  • alternate-reverse : 역방향에서 정방향 왕복
• play-state : 애니메이션의 재생/정지를 설정한다.
• fill-mode : 애니메이션이 시작되기전이나 끝나고 난 후 어떤 값이 적용될지 지정한다.
  • none : 기존위치 시작 -> 애니메이션 시작위치 -> 동작 -> 기존위치 끝
  • forwards : 기존위치 시작 -> 애니메이션 시작위치 -> 동작 -> 애니메이션 끝위치에서 끝
  • backwards : 애니메이션 시작위치 -> 동작 -> 기존위치에서 끝
  • both : 애니메이션 시작위치 -> 동작 -> 애니메이션 끝위치에서 끝