[CSS] 트렌지션(transition) 이란?

트랜지션

transition : 

• property : 어떠한 속성에 적용할 것인가..
  • all ( 기본값 ) : 모든 속성에 적용
  • 속성이름
• duration : 얼마 동안 할것인지. 단위는 s, ms (필수 옵션)
• timing-function
  
  • ease (기본값) : 느리게  => 빠르게 => 느리게
  • ease-in : 느리게 => 빠르게
  • ease-out :  빠르게 => 느리게
  • ease-in-out  : 느리게 => 빠르게 => 느리게 (ease 보다는 변화가 더 심하다)
  • linear : 일정한 속도로 애니메이션을 진행
  • steps : 입력한 만큼 나누어서 ex) timing-function : steps(5,end) 5번에 나누어서 끝까지
  • cubic-bezier : 자신만의 값을 정의
  • 위의 동작들도 한번에 가능하다
  • easings.net/ko 에서 다른 timing-function도 확인 가능

/*
transition-property: background-color;
transition-duration : 300ms;
transition-timing-function : linear;
*/

/*아래처럼 한줄로 줄일 수 있다.*/
transition : background-color 300ms linear;

See the Pen transition by J-Plum (@J-Plum) on CodePen.

1. 위의 코드에서 transition : 1s는 active(클릭시)시
     width 가 100px 이던 div가 300px까지 변하는 시간이 1초가 걸린다는 의미이다

 

2. 두번째 div의 경우 변화는 0.3초만에 끝나지만 색상이 바뀌는데 2초가 걸립니다.

    설명을 하자면 active(클릭시) width가 300px가 되는 것을 300ms로 , 그후 별도로 지정해준  background-color  2s로

    background-color 가 2초에 걸쳐서 바뀝니다.

 

3. 마지막 div의 경우 transition : 2s 1s; 로 되어있습니다.

    첫 번째 2s는 변화하는데 걸리는 시간이 2초, 그리고 그 뒤의 1s의 경우는 지연시간입니다.
    마우스에서 클릭할 때와 손을 때도 변화하기까지 1초의 지연시간이 생깁니다.