[CSS] Animation, Transition, Transform

Animation

.animation {
	animation-name: changeWidth;  // keyframes에 정의할 이름
    animation-duration: 3s;       // 애니메이션 1주기 재상시간
    animation-timing-function: linear;  // 애니메이션 동작 속도
    animation-delay: 1s;          // 애니메이션 실행 대기시간
    animation-iteration-count: 6; // 애니메이션 반복 횟수
    animation-direction: alternate;     // to, from 반복 순서
}
    (=> animation: changeWidth 3s linear 1s 6 alternate;)
    이와같이 한줄로 포현도 가능하고, 순서는 위 항목 순서를 따름.

@keyframes changeWidth {    // 애니메이션 동작 세부내용을 정의함
	from { width: 300px; }  // animation-direction의 시작점
    to { width: 600px; }    // animation-direction의 종료점

 ** timing-function ** (아래 Transition에도 같이 적용됨.)
  1) ease : (기본값) 처음과 끝을 부드럽게
  2) ease-in : 처음을 느리게
  3) ease-out : 마지막을 느리게
  4) ease-in-out : 처음과 마지막을 느리게
  4) linear : 등속도 운동
  5) step-start : 시작하는 지점에 스텝을 끊음
  6) step-end : 끝나는 시점에 스텝을 끊음

 ** direction **
  1) alternate: from -> to -> from (왕복)
  2) normal: from -> to, from -> to (정방향)
  3) reverse: to -> from, to -> from (역방향) 

Transition

.transition {
	transition-property: width;   // 변경할 css 속성
    transition-duration: 2s;      // 변경되는 데 걸리는 시간
    transition-timing-function: linear;  // 변경효과 속도
    transition-delay: 1s;         // 변경 대기 시간
}
    (=> transition: width 2s linear 1s;)
    이와같이 한줄로 포현도 가능하고, 순서는 위 항목 순서를 따름.

Transform

.transition {
	transform: rotate(45deg);       // 회전 (음수: 역방향)
    transform: scale(2,3);          // 크기 조절
    transform: skew(10deg, 20deg);  // 각도 변경
    transform: translate(100px; 200px); // 위치 변경

prefix 접두사 (공통 적용)

위 함수들은 최신 브라우저에서만 적용되는 CSS임.
이를 하위브라우저에서도 적용하기 위한 기능임.

	-webkit-transform: ... // 크롬, 사파리
    -moz-transform: ...    // 파이어폭스
    -ms-transform: ...     // 익스플로러 9.0
    -o-transform: ...      // 오페라

	주의할 점은, keyframes에도 같이 달아줘야 함.
    @-webkit-keyframes ...