CSS 트랜지션(transition)

<style>
    .trans {
       transition-property:color, height;
       transition-duration: 5s, 2s;
       transition-timing-function: linear;
       transition-delay: 1s;
       
       /* transition-property
          transition-duration
          transition-timing-function
          transition-delay
          위에 4가지 값은 자주 사용하는 값으로 줄여서 사용할 수 있다
          'transition: color 750ms linear 1s' */
    }
    
    .trans:hover {
       background-color: red;
       color: black;
    }
</style>

css 트랜지션(transition)

css 트랜지션(transition)은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공한다. 속성 변경이 즉시 영향을 미치게 하는 대신,그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있다.

태그	속성
transition-delay	애니메이션의 지연시간을 지정함
transition-duration	애니메이션이 실행시간을 지정함
transition-property	어떤 속성을 변형할지 지정함
transition-timing-funcion	속성의 전환 속도를 지정함

예) transition-property

<style>
   #nav #gnb ul li {transition-property:background-color,height;
                    transition-duration:5s, 2s;
                    /*백그라운드 색상 변경시간 5초,높이 변경시간 2초*/
</style>

---

transition-timing-function의 속성

태그	속성
linear	시작에서 끝까지 똑같은 속도로 진행
ease	처음에는 천천히 시작하고 점점 빨라지다가 마지막엔 천천히 끝남
ease-in	시작은 느리게
ease-out	느리게 끝남
ease-in-out	느리게 시작하고 느리게 끝냄
cubic-bewier	직접 베이직 함수를 정의해서 사용