css 변형과 전환

css 변형과 전환 

- transition-duration

트랜지션이 진행 될 시간을 지정한다.

Ex) transition-duration:ls; /* 트랜지션 진행 시간 1초 *

 

-transition-property

트랜지션 효과를 만드는 첫 번째 단계는 CSS속성 중 어떤 속성에 트랜지션을 적용할 것인지 선택하는 것이다.

생략할 경우 요소의모든 속성이 트랜지션 대상이된다.

transition-property:all; /* 요소의 모든 속성에 트랜지션 적용 */

transition-property:none; /* 트랜지션 효과 적용하지 않음 */

transition-property:background-color; /* 배경색에 트랜지션 적용 */

transition-property:background-color, border; /* 배경색과 테두리에 트랜지션 적용 */

 

-transform-origin

지정한 요소의 변형 원점을 설정하는 속성이다

transform-origin:x축 y축;

 

-transition-delay

트랜지션 효과를 언제부터 시작할 것인지 정하는 지연 시간을 설정한다

지정하는 시간만큼 기다렸다가 트랜지션이 시작된다

transition-delay:시간;

 

-transition-timing-function

트랜지션 효과의 시작과 중간, 그리고 끝에서의 속도 곡선을 선택한다.

transition-timing-function:속성값;

linear - 시작에서 끝까지 똑같은 속도로 트랜지션을 진행합니다.

ease - 처음에는 천천히 시작하고 점점 빨라지다가 마지막엔 천천히 끝낸다. 기본값

ease-in - 트랜지션 시작을 느리게 한다.

ease-out - 트랜지션을 느리게 끝낸다.

ease-in-out - 느리게 시작하고 느리게 끝낸다.