[CSS] 트랜지션

---

트랜지션

CSS 프로퍼티의 값이 변화할 때 일정시간에 걸쳐 일어나게 하는것

 

<style>
    .square{
        height: 100px;
        width: 100px;
        background-color: aqua;
        transition: all 1s

    }
    
    .square:hover{
        background-color: aquamarine;
    }
</style>

<div class="square">
</div>

 

 

 

 

1.transition-property

트랜지션의 대상 CSS 프로퍼티명 지정 (기본값 all)

 

<style>
    .square{
        height: 100px;
        width: 100px;
        background-color: aqua;
        transition-property: height, background-color;
    }
    
    .square:hover{
        background-color: red;
        height: 150px;
    }
</style>

<div class="square">
</div>

 

 

 

 

2.transition-duration

트랜지션이 일어나는 지속시간
각각 프로퍼티에 따라 1대1로 대응된다.

<style>
    .square{
        height: 100px;
        width: 100px;
        background-color: aqua;
        transition-property: height, background-color;
        transition-duration:0.5s,3s

    }
    
    .square:hover{
        background-color: red;
        height: 150px;
    }
</style>

<div class="square">
</div>

 

 

 

3.transition-timing-function

기본값 ease로 트랜지션의 효과리듬을 정한다.

<style>
    .square{
        height: 100px;
        width: 100px;
        background-color: aqua;
        transition-property: height, background-color;
        transition-duration:0.5s,3s;
        float: left;
    }
    div.square:nth-child(1){transition-timing-function: ease;}
    .square:nth-child(2){transition-timing-function: linear;}
    .square:nth-child(3){transition-timing-function: ease-in;}
    .square:nth-child(4){transition-timing-function: ease-out;}
    .square:nth-child(5){transition-timing-function: ease-in-out;}

    
    .square:hover{
        background-color: red;
        height: 150px;
    }
</style>

<div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

 

 

 

 

4.transition-delay

실제 트랜지션이 시작하는 사이의 대기시간

<style>
    .square{
        height: 100px;
        width: 100px;
        background-color: aqua;
        transition-property: height, background-color;
        transition-duration:0.5s,3s;
        float: left;
    }
    div.square:nth-child(1){transition-timing-function: ease;}
    
    .square:hover{
        background-color: red;
        height: 150px;
        transition-delay: 1s;
    }
</style>

<div>
    <div class="square"></div>
</div>

 

 

 

 

---

🎈참고자료

https://poiemaweb.com/css3-transition