CSS transition / transform / animation

트랜지션 transition

transition-property: width, background-color; // 트랜지션의 대상이 되는 프로퍼티를 지정 (기본값 all)
transition-duration: 1.2s, 3s // 변화가 일어나는 기간. 초단위. 프로퍼티와 각각 대응 (기본값 0s)
transition-timing-function: ease; // 트랜지션 변화율 함수 지정 (기본값 ease)
transition-delay: 1s; // 트리거 이벤트 발생 후 몇 초 후에 트랜지션이 시작될 것인지 지정 (기본값 0s)
transition : (shorthand)

2D 트랜스폼 transform

translate(x,y) 요소의 위치를 X축으로 x만큼, Y축으로 y만큼 이동시킨다. px, %, em 등
translateX(n) 요소의 위치를 X축으로 x만큼 이동시킨다. px, %, em 등
translateY(n) 요소의 위치를 Y축으로 y만큼 이동시킨다. px, %, em 등
scale(x,y) 요소의 크기를 X축으로 x배, Y축으로 y배 확대 또는 축소 시킨다. 0과 양수
scaleX(n) 요소의 크기를 X축으로 x배 확대 또는 축소 시킨다. 0과 양수
scaleY(n) 요소의 크기를 Y축으로 y배 확대 또는 축소 시킨다. 0과 양수
skew(x-angle,y-angle) 요소를 X축으로 x 각도만큼, Y축으로 y 각도만큼 기울인다. +/- 각도(deg)
skewX(x-angle) 요소를 X축으로 x 각도만큼 기울인다. +/- 각도(deg)
skewY(y-angle) 요소를 Y축으로 y 각도만큼 기울인다. +/- 각도(deg)
rotate(angle) 요소를 angle만큼 회전시킨다. +/- 각도(deg)

3D 트랜스폼

translate3d(x,y,z) 요소의 위치를 X축으로 x만큼, Y축으로 y만큼 Z축으로 z만큼 이동시킨다. px, %, em 등
translateX(n) 요소의 위치를 X축으로 x만큼 이동시킨다. px, %, em 등
translateY(n) 요소의 위치를 Y축으로 y만큼 이동시킨다. px, %, em 등
translateZ(n) 요소의 위치를 Z축으로 z만큼 이동시킨다. px, %, em 등
scale3d(x,y) 요소의 크기를 X축으로 x배, Y축으로 y배, Z축으로 z배 확대 또는 축소 시킨다. 0과 양수
scaleX(n) 요소의 크기를 X축으로 x배 확대 또는 축소 시킨다. 0과 양수
scaleY(n) 요소의 크기를 Y축으로 y배 확대 또는 축소 시킨다. 0과 양수
scaleZ(n) 요소의 크기를 Z축으로 z배 확대 또는 축소 시킨다. 0과 양수
rotate3d(x,y,z) 요소를 X축으로 x각도, Y축으로 y각도, Z축으로 z각도 회전시킨다. +/- 각도(deg)
rotateX(x) 요소를 X축으로 x각도 회전시킨다. +/- 각도(deg)
rotateY(y) 요소를 Y축으로 y각도 회전시킨다. +/- 각도(deg)
rotateZ(z) 요소를 Z축으로 z각도 회전시킨다. +/- 각도(deg)

애니매이션 animation

animation-name: myAnimation; // @keyframes 이름
animation-duration: 3s // 변화가 일어나는 기간. 초단위. (기본값 0s)
animation-iteration-count: 3; (기본값 1. number or infinite.)
animation-timing-function: ease; // 애니메이션 함수 지정 (기본값 ease)

    /*
       애니메이션이 반복될 때 진행 방향을 지정
        normal: from -> to (기본값)
        reverse: to -> from
        alternate: 홀(normal) 짝(reverse)
        alternate-reverse: 홀(reverse) 짝(normal)
    */

animation-direction: normal;

    /*
        애니메이션이 실행 상태가 아닐 때 (대기 or 종료) 요소의 스타일 지정
        none:       대기 -> 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
                    종료 -> 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.
        forwards:   대기 -> 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
                    종료 -> 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.
        backwrads:  대기 -> 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
                    종료 -> 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.
        both :      대기 -> 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
                    종료 -> 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.
    */

animation-fill-mode: none;

    // running(기본값) || paused

animation-play-state: running;
animation-delay: 1s; // 요소 로딩 후 몇 초 후에 애니메이션이 시작될 것인지 지정 (기본값 0s)
(shorthand)
animation : [키프레임스이름] [애니메이션진행시간] [이징] [시작전대기시간] [반복횟수] [모드]