CSS3 특수효과 transition

jb kim·2021년 8월 16일

CSS

목록 보기

23/24

CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 변화는 대개 즉시 일어납니다. CSS 트랜지션을 이용하면, 그 변화가 설정한 시간과 방법에 따라 다르게 적용됩니다.

5_transitions.html

<div class="box"></div>

css는 style태그에

      body {
        background: #333;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
      }

      .box {
        background: white;
        width: 100px;
        height: 100px;
        transition-property: background-color border-radius height width;
        /* transition-property: all; */
        transition-duration: 3s;
        /* transition-timing-function: ease-out; */
        /* transition-delay: 2s; */

        /* 단축키워드 - property/duration/timing-function/delay */
        /* transition: all 1s ease-in-out; */
      }

      .box:hover {
        background: red;
        border-radius: 50%;
        height: 300px;
        width: 300px;
      }

사용가능한 속성 종류

     /*
        background-color 
        background-position 
        border-color 
        border-width 
        border-spacing 
        bottom 
        color
        font-size 
        font-weight 
        height left 
        letter-spacing 
        line-height 
        margin 
        max-height 
        max-width 
        min-height 
        min-width 
        opacity 
        outline-color 
        outline-offset 
        outline-width 
        padding right 
        text-indent 
        text-shadow 
        top 
        vertical-align 
        visibility 
        width 
        word-spacing 
        z-index 
        */