Ch 8. CSS 속성- 변환(transition)

전환

transition: 요소의 전환 효과를 지정하는 단축속성

transition: 속성명(transition-property) 지속시간(transition-duration) 타이밍함수(transition-timing-function) 대기시간(transition-delay);

*지속시간은 필수 속성

1
2
3
4
5
6
7
8
9
10
11

div {
  width:100px;
  height: 100px;
  background-color: orange;
  **transition: 1s;**
}

div:hover {
  width: 300px;
  background-color: royalblue;
}

transition

transition-property: 전환효과를 사용할 속성 이름을 지정

  • all: 모든 속성에 적용(기본값)
  • 속성이름: 전환 효과를 사용할 속성 이름 명시
1
2
3
4
5
6
7
8
9
10
11

div {
  width: 100px;
  height: 100px;
  background-color: orange;
  transition: * * width * * 1s;
}

div:hover {
  width: 300px;
  background-color: royalblue;
}

transition property

transition-duration: 전환 효과 지속 시간 지정

  • 0s: 전환효과 x
  • 시간: 지속시간 지정
1
2
3
4
5
6
7
8
9
10
11
12
13

div {
  width:100px;
  height: 100px;
  background-color: orange;
  transition:
    **width .3s,
    background-color 2s;**
}

div:hover {
  width: 300px;
  background-color: royalblue;
}

transition duration

transition-timing-function: 전환 효과의 Easing 함수를 지정

  • ease: 느-빠-느
  • linear: 일정하게
  • ease-in: 느-빠
  • ease-out: 빠-느
  • ease-in-out: 느-빠-느


transition-delay: 전환 효과가 몇초 뒤에 시작할지 대기시간 지정

1
2
3
4
5
6
7
8
9
10
11

div {
  width:100px;
  height: 100px;
  background-color: orange;
  **transition: 1s .5s;**
}

div:hover {
  width: 300px;
  background-color: royalblue;
}

transition delay