• 특정 조건에 따라 상태가 변하는 것
  • 색상이나 크기 등과 같은 속성이 특정 조건에 따라 변화하는 과정
  • 특정 조건 ex) 마우스 포인터를 올렸을 때

*html 파일
 
<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>transition 속성</title>
    <link ref="stylesheet" href="CSS문서명.css" />
  </head>
 
  <body>
    <div id="transition"></div>
  </body>
</html>
*css파일 #transition {
  width: 300px;
  height: 300px;
  background-color: yellow;
  transition-property: width;
  transition-duration: 3s;
  transition-timing-function: ease;
  transition-delay: 1s;
}
 
#transition:hover {
  width: 600px;
}

  • 변화를 주려는 속성
  • 속성을 쉼표(,)로 구분하여 여러 개 지정 가능
  • 변화를 주는 속성이 많을 때는 all을 속성값으로 입력

  • 변화가 일어나는 시간
  • 기본값은 0s
  • transition- 속성을 적용하기 위해 꼭 명시해야 함!

  • 변화하는 속도를 어떻게 가속시키고 감속시킬지

    linear : 시작~종료, 같은 속도로 변화
    ease : 초반은 느리게, 중반을 빠르게, 종반은 느리게
    ease-in : 초반은 느리게
    ease-out : 후반은 느리게
    ease-in-out : 시작, 종료 지점의 변화가 느리게


  • 변화가 시작되는 시간을 지연시킬 때 사용
  • 기본값은 0s

  • transition 영역에 마우스 포인터를 올렸을 때
  • :hover 는 마우스 포인터를 올렸을 때 라는 의미를 담은 가상 클래스

*css파일 #transition {
  width: 300px;
  height: 300px;
  background-color: yellow;
 
  /* 변화 과정을 보여 주고자 하는 속성은 width */
  transition-property: width;
 
  /* width 300px->600px 변화하는 데 걸리는 시간은 3초 */
  transition-duration: 3s;
 
  /* 느리게, 빠르게, 느리게 진행 */
  transition-timing-function: ease;
 
  /* 마우스 포인터를 올렸을 때 1초 후에 변화 시작 */
  transition-delay: 1s;
}
 
/* #transition에 마우스 포인터를 올렸을 때
        width 속성값이 600px로 변화 */
#transition:hover {
  width: 600px;
}

*css파일 #transition {
  width: 300px;
  height: 300px;
  transition-property: width;
  transition-duration: 3s;
  transition-timing-function: ease;
  transition-delay: 1s;
}

위의 transition 표현은 아래 표현처럼 한 줄로 표현할 수 있다.

*css파일 #transition {
  width: 300px;
  height: 300px;
  transition: width 3s ease 1s;
}

먼저 나오는 숫자(3s)는 duration, 나중에 나오는 숫자(1s)는 delay를 의미