GitHub 참고

전환 이란 ?

css에서 한 요소에 적용된 스타일 속성값을 다른 속성값으로 변하게 하는 것

.orange-box{
         background-color: orange;
}

.orange-box:hover{
         background-color: purple;
}

오렌지 박스에 :hover 마우스를 올리면 보라색 박스로 변경되는 것처럼 전환은 기존 속성값을 다른 값으로 변경되는 것을 말합니다.

1. transition-property 속성

전환 효과를 적용할 대상 속성을 지정합니다.

속성값 : none, all

transition-property : background-color;
transition-property : background-color, color, width ;
transition-property : all;

2. transition-duration 속성

전환 효과의 지속 시간을 설정하는데 사용합니다.

transition-duration : 1s;

transition-property : background-color, color, width ;
transition-duration : 1s, 500ms, 2s;

background-color는 1초 , color는 0.5초 , width는 2초 동안 전환 효과를 받습니다.

3. transition-delay 속성

전환 효과의 발생을 지연할 수 있습니다.

.red-box{
	transition-delay : 1s;
}

1초 지연 후 전환 효과가 발생합니다.

4. transition-timing-function 속성

전환 효과의 진행 속도를 지정합니다.
속성값 : linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(p1,p2,p3,p4)

cubic-bezier() 값을 구해주는 사이트 : https://cubic-bezier.com/

<div class="container">
    <div class="bar">linear</div>
    <div class="bar">ease</div>
    <div class="bar">ease-in</div>
    <div class="bar">ease-in-out</div>
    <div class="bar">ease-out</div>
    <div class="bar">normal</div>
</div>


.container .bar {
     width: 50px;
     height: 50px;
     background-color: red;
     transition-property: width;
     transition-duration: 5s;
     margin: 5px;
}

.container:hover .bar{
     width: 200px;
}


.bar:nth-child(1){
     transition-timing-function: linear;
}
.bar:nth-child(2){
     transition-timing-function: ease;
}
.bar:nth-child(3){
     transition-timing-function: ease-in;
}
.bar:nth-child(4){
     transition-timing-function: ease-in-out;
}
.bar:nth-child(5){
     transition-timing-function: ease-out;
}