transition

CSS에서 한 요소에 적용된 스타일 속성값을 다른 속성값으로 변하게 하는 것

전환

:hover 는 transition의 일종이다.

버튼 클릭 모션은 transition의 일종이다.

transition-property

전환 효과를 적용할 속성.

기본적으로는 선택 하지 않아도 된다.

형식

  transition-property:<속성값>, <속성값>;

예시

p {
  transition-property:background-color;
}

transition-duration

전환 효과의 지속 시간을 설정한다.

형식

  transition-duration:<시간>;

예시

p{
  background-color: red;
}
p:hover {
  background-color: blue;
  transition-property:background-color;
  transition-duration:1s;
}

transition-delay

전환 효과의 발생 대기 시간을 설정한다.

형식

  transition-delay:<시간>;

예시

p{
  background-color: red;
}
p:hover {
  background-color: blue;
  transition-property:background-color;
  transition-duration:1s;
  transition-delay:1s;
}

transition-timing-function

전환 효과의 진행 속도를 지정한다.

형식

  transition-timing-function:<속성값>;;

예시

p{
  background-color: red;
}
p:hover {
  background-color: blue;
  transition-property:background-color;
  transition-duration:1s;
  transition-delay:1s;
  transition-timing-function:ease;
}