transform / transition

transform과 transition을 사용하면 위에 움직이는 도형처럼 html 요소에 동적인 효과들을 줄 수 있다.

transform 속성은 요소에 회전, 크기 조정, 이동, 기울임 등의 변형을 주고,

transition 속성은 변형의 제어를 담당합니다(동작 시간, timing-function 등).

transition

• transition-delay : 전환(transition) 효과가 나타나기 전까지의 지연 시간을 설정
• transition-timing-function : 전환(transition) 효과의 시간당 속도를 설정
• transition-duration : 전환(transition) 효과가 지속될 시간을 설정
• transition-property : 요소에 추가할 전환(transition) 효과를 설정
• transition : 모든 transition 속성을 이용한 스타일을 한 줄에 설정할 수 있음

모든 트랜지션 프로퍼티를 한번에 지정할 수 있는 shorthand이다. 값을 지정하지 않은 프로퍼티에는 기본값이 지정된다.

단, transition-duration은 반드시 지정해야 한다. 지정하지 않는 경우 기본값 0이 셋팅되어 어떠한 트랜지션도 실행되지 않는다.

transition　:　 property 　duration 　function　delay
기본값　　:　 　 all 　　　　 0 　　　 ease 　　 0

transition-property

프로퍼티는 트랜지션의 대상이 되는 CSS 프로퍼티명을 지정한다. 지정하지 않는 경우 모든 프로퍼티가 트랜지션의 대상이 된다. 복수의 프로퍼티를 지정할 경우 쉼표(,)로 구분한다.

모든 CSS 프로퍼티가 트랜지션의 대상이 될 수 없다. 예를 들어 width, font-size, background-color 등은 하나의 범주안에서 크기나 색상의 값이 변화가 가능하지만 display 프로퍼티는 그렇지 않다.

• 박스모델

1. width height, max-width, max-height, min-width, min-height
2. padding, margin
3. border-color, border-width, border-spacing

• 배경

1. background-color, background-position

• 좌표

1. top, left, right, bottom

• 텍스트

1. color font-size, font-weight, letter-spacing, line-height
2. text-indent, text-shadow, vertical-align, word-spacing

• 기타

1. opacity, outline-color, outline-offset, outline-width
2. visibility, z-index

transition-duration

트랜지션에 일어나는 지속시간을 초 단위(s) 또는 밀리 초(ms) 단위로 지정한다.
프로퍼티 값을 지정하지 않을 경우 기본값이 0초로 지정되어 어떠한 효과도 볼 수 없다.
위에 transition-property만 적용할 경우가 그 예시이다.

transition-duration 프로퍼티값은 transition-property 프로퍼티값과 1:1 대응한다.

transition-timing-function

트랜지션 효과의 변화 흐름, 시간에 따른 변화 속도와 같은 일종의 변화의 리듬을 지정한다.

대부분의 타이밍 함수는 큐빅 베이지어를 정의하는 네 점에 의해 정의되므로 상응하는 함수의 그래프로 제공해서 명시할 수 있다.

transition-delay

transition-delay : 트랜지션 발동 대기시간
시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다.

transition-druation이 트랜지션 지속 시간이라면, transition-delay는 발동 대기 시간이라고 보면 된다. 일정 시간 대기한 후 트랜지션이 실행되도록 한다.