transition

• 지연되는 시간을 이용해서 서서히 변화하는 모습을 보여줌
• 변화체(ex. 반응 선택자 등)가 있어야만 작동이 됨
• 종류:
  - transition-property
  - transition-duration
  - transition-timing-function
  - transition-delay
  - transition
  

transition-property

        div:nth-of-type(1){
            transition-duration: 2s;
        }
        /* property */
        div:nth-of-type(2){
            transition-property: width;
            transition-duration: 2s;
        }
        div:nth-of-type(3){
            transition-property: all;
            transition-duration: 2s;
        }
        div:nth-of-type(4){
            transition-property: width, left;
            transition-duration: 2s;
        }
        div:nth-of-type(5){
            transition-property: width, left;
            transition-duration: 2s, 4s;
        }
        div:nth-of-type(6){
            transition: width 2s, left 4s;
        }

⌨️ 문법

transition-property: width, left;
transition-duration: 2s, 1s;

• 해당되는 대상만 지연효과가 적용
• 전체에 걸고 싶은 경우 'all' 작성(보통 기본값)
• 동시에 거는 경우 쉼표로 연결하여 작성하며 시간도 따로 설정 가능

transition-duration

        div:nth-of-type(7){
            transition-duration: 0.5s;
        }
        div:nth-of-type(8){
            transition-duration: 500ms;
        }
        .timing_fn:checked ~ div{
            width: 100px;
            height: 100px;
            background-color: #f00;
            border-radius: 0px;
            left: 300px;
            transition-duration: 2s;
        }

⌨️ 문법

transition: width 2s, left 4s;

• 변화하는 시간을 지연시키는 효과
• 시간 단위는 s, ms(1s = 1000ms) 사용 가능

transition-timing-function

        .timing_fn:checked + div{
            transition-timing-function: ease;
        }
        .timing_fn:checked + div + div{
            transition-timing-function: linear;
        }
        .timing_fn:checked + div + div + div{
            transition-timing-function: ease-in;
        }
        .timing_fn:checked + div + div + div + div{
            transition-timing-function: ease-out;
        }
        .timing_fn:checked + div + div + div + div + div{
            transition-timing-function: ease-in-out;
        }
        .timing_fn:checked + div + div + div + div + div + div{
            transition-timing-function: cubic-bezier(.11,1.11,.89,-0.44);
        }
        .timing_fn:checked + div + div + div + div + div + div + div{
            transition-timing-function: steps(3);
        }
        .timing_fn:checked + div + div + div + div + div + div + div + div{
            transition-timing-function: steps(5);
        }
        .timing_fn:checked + div + div + div + div + div + div + div + div + div{
            transition-timing-function: steps(5, start);
        }
        .timing_fn:checked + div + div + div + div + div + div + div + div + div + div{
            transition-timing-function: steps(5, end);
        }

⌨️ 문법

transition-timing-function: ease;

• 아래 사이트에서 코드 복사하여 사용가능
  - https://cubic-bezier.com/#.17,.67,.83,.67
• 변화 구간 내 시간의 배분 결정
  - ex. 처음에는 느리게, 나중에 빠르게 등
• 종류
  - ease
  - linear
  - ease-in
  - ease-out
  - ease-in-out
  • step(, start or end)

transition-delay

        .delay:checked ~ div{
            width: 100px;
            height: 100px;
            background-color: #f00;
            border-radius: 0px;
            left: 300px;
            transition-duration: 2s;
        }
        .delay:checked + div{
            transition-delay: 0s;
        }
        .delay:checked + div+div{
            transition-delay: 1s;
        }
        .delay:checked + div+div+div{
            transition-delay: 3s;
        }

⌨️ 문법

transition-delay: 0s

• 변화 시작 시간 지연

transition

⌨️ 문법

transition: width 2s, left 4s;

• 해당되는 대상에 각각 시간을 작성하여 설정
• 따로 쓰는 것보다 코드 보기에 더 직관적임