전환(Transitions)

CSS 속성의 전환 효과를 지정

선언할때 바뀌기 전의 요소에 transition값을 선언해야한다.

 

CSS 속성의 시작과 끝을 지정(전환 효과)하여 중간 값을 애니메이션

값	의미	기본값
transition-property	전환 효과를 사용할 속성 이름 --> 전체를 전환 효과를 넣을 수 있고 일부를 선택해서 전환 효과를 넣을 수 있다.	all
transition-duration	전환 효과의 지속시간 설정 --> ms도 사용 가능하다.	0s
transition-timing-function	타이밍 함수 지정	ease
transition-delay	전화 효과의 대기시간 설정	0s

 

 

사용방법

1. transition-property & transition-duration

.box{
  width: 100px;
  height: 100px;
  background: tomato;
  margin: 50px;
  transition-property: width, background;
  transition-duration: 1s;
}

.box:hover{
  width: 300px;
  background: dodgerblue;
}

transition-property는 어디 부분에 효과를 넣고싶을지 지정을 하고, transition-duration은 그 효과 시간을 어떻게 설정할 것인지 결정하는 부분이다.  하지만 분리하지 않고 합쳐서 사용할 수 있다.

 

 

2. transition

.box{
  width: 100px;
  height: 100px;
  background: tomato;
  margin: 50px;
  transition: width 1s, background 1s;
}

.box:hover{
  width: 300px;
  background: dodgerblue;
}

이렇게 한꺼번에 시간과 효과부분을 지정할 수 있다.

 

 

 

transition-property

전환 효과를 사용할 속성 이름을 설정

값	의미	기본값
all	모든 속성에 적용	all
속성이름	전환 효과를 사용할 속성 이름

 

 

transition-duration

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

값	의미	기본값
시간	전환 효과가 지속되는 시간	0s

 

사용방법

.box{
  width: 100px;
  height: 100px;
  background: tomato;
  margin: 50px;
  transition: 2s;
  transition-timing-function: linear;
}

.box:hover{
  width: 300px;
  background: dodgerblue;
}

.box{
  width: 100px;
  height: 100px;
  background: tomato;
  margin: 50px;
  transition: 2s linear;
}

.box:hover{
  width: 300px;
  background: dodgerblue;
}

다음 이 2개의 소스코드는 동작이 동일하게 작동되는 것이다.

 

 

transition-delay

전환 효과가 몇 초 뒤에 시작할지 대기시간을 설정

값	의미	기본값
시간	전환 효과의 대기시간을 설정	0s

 

사용방법

.box{
  width: 100px;
  height: 100px;
  background: tomato;
  margin: 50px;
  transition: 2s 3s;
}

.box:hover{
  width: 300px;
  background: dodgerblue;
}

사용방법은 다음과 같다. transition에는 시간이 2개가 있는데, 2s가 transition-duration으로 인식하고 3s가 transition-delay라고 인식한다.