animation, transition, transform 속성 정리

1. animation

animation-name: @keyframes 이름 (예제에서는 fadeOut 을 사용)
animation-duratuion: 타임 프레임의 길이, 키프레임이 동작하는 시간을 설정할 때 사용
animation-timing-function: 애니메이션 속도 조절/그래프 (linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier)
animation-delay: 애니메이션을 시작하기 전 지연시간 설정
animation-iteration-count: 반복 횟수 지정
animation-direction: 반복 방향 설정 (normal/reverse/alternate/alternate-reverse)
animation-fill-mode: 애니메이션 시작/끝 상태 제어 (none/forwords/backwords/both)
animation-play-state: 애니메이션 재생 상태(재생 또는 중지)를 지정 (running/paused)

animation-direction:
-normal: 애니메이션의 방향을 정상적(기본값)으로 설정합니다.
-reverse: 애니메이션 움직임의 방향을 역방향으로 설정합니다.
-alternate: 애니메이션 움직임의 방향을 순방향을 진행 후 역방향으로 설정합니다.
-alternate-reverse: 애니메이션 움직임의 방향을 역방향을 진행 후 순방향으로 설정합니다.

animation-fill-mode:
-none: 	애니메이션이 끝난 후 상태를 설정하지 않습니다.
-forwards: 애니메이션이 끝난 후 그 지점에 그대로 있습니다.
-backwards: 애니메이션이 끝난 후 시작점으로 돌아옵니다.
-both: 애니메이션이의 앞 뒤 결과를 조합하여 설정합니다.

모든 애니메이션 프로퍼티를 한번에 지정
animation: name duration timing-function delay iteration-count direction fill-mode play-state

사용법

animation-name: fadeOut;
animation-duration: 4s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate;

or

animation: fadeOut 4s 1s infinite linear alternate;

출처: pro-self-studier.tistory.com/108  
        poiemaweb.com/css3-animation

2. transition

transition-property: 효과 설정 (none/all/property)
transition-duration: 타임 프레임의 길이, 키프레임이 동작하는 시간을 설정할 때 사용
transition-timing-function: 애니메이션 속도 조절/그래프 (linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier)
transition-delay: 애니메이션을 시작하기 전 지연시간 설정

사용법

transition-property: all;
transition-duration: .3s;
transition-timing-function: ease;

or

transition: all .3s ease;

출처: ielselog.blogspot.com/2013/09/understand-css-trasition.html
easing 확인: www.joelambert.co.uk/morf/

3. transform

/* 키워드 값 */
transform: none;

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

/* 다중 함수 값 */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

/* 전역 값 */
transform: inherit;
transform: initial;
transform: unset;