transition

• A->B 로 전환되는 모습을 보여주는 것
  -> hover와 같이 유저의 액션이 있어야 사용 가능

1)transition-property

::::어떤 css를 변경할건지 ' , '로 여러개 사용 가능
-> all로 지정하면 모든 프로퍼티에 전부 transition적용
어떤 속성만 지정하면 그 속성만 적용됨
-> 만약 :hover에 transition을 넣으면
마우스를 올리는 순간에만 transition이 적용되고 마우스를 내리는 순간 transition효과 사라짐

2)transition-duration(s, ms)

::전환이 얼마나 지속 될 지를 지정(몇초동안 전될건지)

=> transition-property를 background-color으로 지정했으므로 배경색만 천천히 바뀌는 걸 볼 수있다.

=>' , '로 transition-property를 다수 사용 가능

3) transition-delay (s, ms)

:: 전환이 몇 초 후에 실행 될 지를 지정

=> transiton-delay를 설정한 초 후에 transition실행됨

4)transition-timing-function

::triansition이 실행되는 중간 과정을 어떤 길이로 사용할건지
-ease(기본값): 중간으로 갈수록 속도가 증가하고 마지막에 느려짐

• ease-in: 천천히 시작하고 뒤로갈수록 빨라짐
• ease-out: 빠르게 시작하고 뒤로갈수록 느려짐
• ease-in-out: 천천히 시작하고 빨라졌다가 다시 느려짐
  -linear:처음부터 끝까지 속도가 비슷함

한번에 사용하는 trainsition

1. property name | duration

transition : margin-left 4s;

2. property name | duration | delay

transition : margin-left 4s 1s;

3. property name | duration |timing function | delay

transition: marin-left 4s ease-in-out 1s;

-> 초를 한번만 사용하면 duration으로 인식하기 때문에 시간 순서를 잘 기억해야됨!!