[CSS] Transition 애니메니션 효과 property duration timing-function

CSS 애니메이션 효과 주기 Transition property duration timing-function

 

Transition-property : 이벤트시 변경 원하는 Property

Transition-duration : 변경 시간

Transition-timing-function : 변경 속도

 

   샘플 예제

.box {
    background-color : royalblue;
    width : 100px;
    height : 100px;
}

.box:hover {
    background-color : tomato;
    transition-property : background-color;
    transition-duration : 500ms;
    transition-timing-function : ease;
}

 

   출력 결과