Transform

• 특정 object의 속성을 변화시킬 때 사용
  1. rotate(angle): 회전
  2. scale(x, y): 크기변경, 각각 현재 크기에서 조절하고 싶은 비율을 넣어준다.
  3. skew(x-deg, y-deg): x, y축을 기준으로 입력한 각도만큼 비틈
  4. translate(x-leng, y-leng): 입력한 길이만큼 위치 이동
  

Transition

• 특정 object에 변화하는 과정을 보여줄 때 사용
  1. transition-property: 효과를 적용하고자 하는 css 속성(ex.color)
  2. transition-duration: 효과가 나타나는 데 걸리는 시간
  3. transition-timing-function: 효과의 속도(ex.ease, linear)
  4. transition-delay: 특정 조건 후에 효과 발동
• 단축 속성으로 사용가능(단, duration과 delay의 순서 주의)

transition: property duration timing-function delay;

animation

• 임의의 애니메이션을 생성할 때 사용
  1. animation-name: 사용하고자 하는 animation의 이름
  2. animation-duration: 효과의 수행시간
  3. animation-timing-function: 효과의 속도
  4. animation-delay: 특정 조건 후에 효과 발동
  5. animation-iteration-count: 효과 반복 횟수(ex.1, infinite)
  6. animation-direction: 효과 진행 방향(ex.normal, reverse, alternate)
• 그리고 임의의 name을 사용해 animation을 아래처럼 정의해줘야 한다.

@keyframes rotate {
	from {
    	transform: rotate(0deg);
    }
    to {
    	transform: rotate(180deg);
    }
    /* 또는 */
    0% {
    	transform: rotate(0deg);
    }
    50% {
    	transform: rotate(90deg);
    }
    100% {
    	transform: rotate(180deg);
    }
}

• 단축 속성으로 사용가능(단, duration과 delay의 순서 주의)

animation: name duration timing-function delay iteration-count direction;

vender-prefix

• 브라우저 버전 등의 문제로 인해 특정 css효과(대부분 최신 효과)를 적용하기 위해 사용하는 것