CSS transition

- 애니메이션을 적용해주는 속성입니다.

- fade in, fade out 등의 효과를 넣을 때 사용합니다.

- css값이 A에서 B로 변환될때, 전환되는 시간차를 지정해줍니다.

- transform 과 함께 사용하여 유저 액션에 따른 추가 효과를 만들어 낼 수 있습니다.

 

transition-property

   - 애니메이션을 적용할 수 있는 모든 단축 하위속성이 지정됩니다.

   - 어떤 요소에 transition을 적용할 지 정합니다.

 

transition-duration

   - 각 요소별로 적용되는 transition 시간을 지정합니다.

   - 애니메이션이 적용되는 시간을 조절할 수 있습니다.

 

예시

transition-property : all;	/* 모든 값에 transition을 적용 */
transition-duration: 1000ms; /* transition을 적용시간을 1초로 설정 */

transition-property : none; /* 모든 값에 transition을 적용하지 않음 */

/* margin-right와 color에 transition을 적용*/
transition-property : margin-right, color;
/* margin-right는 1000ms, color는 2000ms동안 바뀌도록 설정 */
transition-duration : 1000ms, 2000ms;



/* 사용 예시 */

.box{
	width: 300px;
    height: 80px;
    border: 2px dashed darklategray;
    font-size: 50px;
    color: white;
    
    transition-property: background-color;
    transition-duration:2s;
}

.box:hover{
	width: 340px;
    background-color: indianred;
    color: black;
    font-size: 60px;
}

 

   - 위 예시에서, hover에 transition을 설정하면 마우스를 올릴때만 적용됩니다.

 

transition-delay

   - 트랜지션 작업을 지연시키는 속성입니다.

   - 설정하면 해당 시간이 지난 후, transition을 수행합니다. 

  

transition-timing-function

   - https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

transition-timing-function - CSS: Cascading Style Sheets | MDN

   - transition이 선형으로 수행되는것이 아닌, 추가적인 효과를 부여할 수 있습니다.

   - easein easeout 등의 속성으로 점점빠르게 또는 점점 느리게 설정할 수 있습니다.

   - step 등의 속성으로 매끄럽지 않고 원하는 숫자만큼 분할시켜 보여줄 수도 있습니다.

   - cubic-bezier 등의 속성으로 3차 베지어 설정을 할 수 있습니다.

 

 

transition ( shorthand )

   - transition 관련 속성을 한번에 적용할 수 있는 단축속성입니다.

   - 초기값은 delay 0s, duration 0s, property all, timing-function ease, behavior normal 로 되어있습니다.

   - 시간을 적용하는 속성이 두가지이므로 duration과 delay의 순서를 확인해야 합니다.

      : 시간이 하나만 적용되어있다면 duration으로 설정합니다

      : 시간이 두개 적용되어있다면 앞쪽이 duration, 뒤쪽이 delay입니다.

   - 일반적으론

      1. transition-property

      2. transition-duration

      3. transition-timing-function

      4. transition-delay 순으로 입력합니다.