transition 사용하기

웹페이지를 보다 동적으로 만들어 사용자 경험을 향상시키기 위해서는 transition을 다룰 수 있어야 한다.

1. transition에는 property, duration, function, delay 속성이 있다. 각각 애니메이션을 적용시킬속성, 애니메이션 시간, 애니메이션 종류, 애니메이션 실행 전 딜레이를 의미한다.
2. transition은 해당 요소의 모양이 변하기 전 css에 적용해야한다. hover 속성 등으로 바뀐 모양은 따로 지정한 뒤 원래의 css속성에 transition 옵션을 적용한다.

 

 

transition 형식 (기본)

div {
    transition-property : height;
    transition-duration : 0.5s;
    transition-delay : 1s;
    transition-timing-function : ease;
}

 

transition 형식 (단축속성)

div {
    /* 순서 : property duration timing-function delay */
    transition : height 0.5s ease 1s;
}
a {
    /* height와 width에 duration을 따로 지정 */
    transition : height 0.5s, width 1s ease 1s;
}