[CSS] transition 변환 속성, 움직임을 부드럽게 처리하는 속성

transition-duration :	~초동안 변화하겠다. transition-duration:1s;
transition-delay :	지연. 사용자의 행위 후 ~초 뒤에 변화하겠다. transition-delay:2s;
transition-property :	특정 요소만 지정하여 transition을 적용시키겠다. transition-property: background-color, width;
transition-timing-function :	linear	시작부터 끝까지 같은 속도로 트랜지션을 진행한다.
	ease	처음에는 천천히 시작해서 점점 빨라지며 마지막에는 천천히 끝낸다. 기본값.
	ease-in	맨 처음 시작을 느리게 함
	ease-out	마지막을 천천히 끝냄.
	ease-in-out	느리게 시작해서 느리게 끝냄

* '이벤트' = 사용자가 하는 모든 행위를 말한다. 클릭이나 마우스 오버같은.

 transition: 0.3s;

한꺼번에 쓸 수 있다. 

---

 transition : 변환 속성 
움직임을 만들어내는 속성.

어떤 요소의 움직임을 부드럽게 처리하는 역할을 한다. 
움직임을 구현할 때 애니메이션 속성과 변환 속성으로 나눠지는데 변환 속성을 이용하면 더 간단하게 모션 효과를 구현할 수 있다. 

transition은 사용자가 행위를 해야지만 움직인다. 애니메이션은 브라우저가 열리면 그때부터 움직인다는 차이점이 있다. 

 

** transition은 hover나 active등 행위명령에 적용하는 게 아니라 그 전의 그 대상 자체에 명령한다. 
변환 속성은 적용한다고 해서 바로 변화가 눈에 보이는 것이 아니라 사용자의 행동에 따라 ~초동안 변화시키는 속성이다.

[ 변환 속성으로 변화 시킬 수 있는 다양한 속성들 ]
   

1. 위치 속성 : position-top, left, right, bottom 
2. 크기 속성 : width, height
3. 박스 속성 : margin, padding
4. 테두리 속성 : border-width, border-color, border-radius
5. 색상 속성 : color, background-color, rgba
6. 투명도 : opactiy(안의 컨텐츠까지 투명해짐)
7. 변환 속성 : transform

 [ 종류 ]

 

1. transition-duration

: 몇 초동안 움직임을 진행할 것인지 지정하는 속성.

초 단위를 나타낼 때는 s 단위를 사용한다. 1s = 1초 

 /* 1초동안 변화하겠다. 변화하는 시간을 늘려서 부드럽게 보이도록 함.  */

        transition-duration: 1s;

    
2. transition-delay

: 이벤트(클릭이나 마우스 오버같은 사용자에 의해 발생하는 모든 행위를 말한다.) 발생 후 몇 초 후에 모션을 재생할지 지정함. 지연시킴

 transition-delay: 1s;   1초동안 지연 시킴

 

3. transition-property

: 어떤 속성을 변화시킬지 지정함. 속성값으로는 css 속성의 이름을 사용한다. 
transition-property을 지정하면 다른 속성은 transition의 영향을 받지 않고 지정한 속성만 변화 시킬 수 있다. 

 .box {

        transition-property: background-color, width;

        transition-duration: 4s, 2s; 

      }

transition-property - 변화 시킬 속성은 배경 색과 넓이라는 뜻

transition-duration - 배경 색은 4초동안, 넓이는 2초동안 변화하겠다는 뜻이다.  

변화시킬 속성을 property 

 

4. transition-timing-function

: 수치 변형 함수. 지정된 속도로 모션 효과를 줄 수 있다. 

[ 속성값 ]
    - linear : 시작부터 끝까지 같은 속도로 트랜지션을 진행한다. ☆
    - ease : 처음에는 천천히 시작해서 점점 빨라지며 마지막에는 천천히 끝낸다. 기본값.☆
    - ease-in : 맨 처음 시작을 느리게 함. 
    - ease-out : 마지막을 천천히 끝냄.
    - ease-in-out : 느리게 시작해서 느리게 끝냄

 

---

 .box {

        width: 30px;

        height: 50px;

        background-color: lightblue;

        margin: 10px;

        position: relative;

        transition-duration: 5s;

      }

      #graph:hover .box {

        width: 600px;

      }

      .box:nth-child(1) {

        transition-delay: 0s;

      }

      .box:nth-child(2) {

        transition-delay: 1s;

      }

      .box:nth-child(3) {

        transition-delay: 2s;

      }

      .box:nth-child(4) {

        transition-delay: 3s;

      }

      .box:nth-child(5) {

        transition-delay: 4s;

      }

그래프에 transition-delay의 차이를 두어 각각 다르게 늘어나도록 설정해줄 수 있다. 

transition-duration은 box에 직접 적용.