06.30(transition)

transition

시간의 흐름에 따라 스타일 속성의 변화되는 모습을 표현

 

① transition

② transition-delay

③ transition-duration (절대 생략하면 X 제일 중요)

④ transition-property

⑤ transition-timing-function

---

transition 속성

속성	설명
transition	모든 transition 속성을 이용한 스타일을 한 줄에 설정
transition-delay	전환(transition) 효과가 나타나기 전까지의 지연 시간을 설정
transition-duration	전환(transition) 효과가 지속될 시간을 설정
transition-property	요소에 추가할 전환(transition) 효과를 설정
transition-timing-function	전환(transition) 효과의 시간당 속도를 설정

 

transition 

 

① 해당 요소에 추가할 CSS 스타일 전환(transition) 효과를 설정

② 추가할 전환 효과가 지속될 시간을 설정

 

 

transition-delay

 

전환(transition) 효과가 나타나기 전까지의 지연 시간을 설정

전환(transition) 효과는 이 메소드로 설정된 시간이 흐른 뒤에야 비로소 시작됨

 

 

transition-duration

 

전환(transition) 효과가 지속될 시간을 설정

 

 

transition-property

 

요소에 추가할 전환(transition) 효과를 설정

 

 

transition-timing-function

 

전환(transition) 효과의 시간당 속도를 설정

 

transition-timing-function 속성의 속성값

값	설명
linear	전환(transition) 효과가 처음부터 끝까지 일정한 속도로 진행
ease	기본값으로, 전환(transition) 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려짐
ease-in	전환(transition) 효과가 천천히 시작됨
ease-out	전환(transition) 효과가 천천히 끝남
ease-in-out	전환(transition) 효과가 천천히 시작되어, 천천히 끝남
cubic-bezier(n,n,n,n)	전환(transition) 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행

 

예제)

/* 기본 상태A  */
.transition1 {
  width: 100px;
  height: 100px;
  background: red;
  border: 1px solid black;
  transition-duration: 1s;  /*절대 생략하면 X 제일 중요*/
  transition-property: width;
  transition-timing-function: linear;
  transition-delay: .5s;
}

/* 변화된 상태B */
.transition1:hover {
  width: 500px;
  height: 300px;
}