CSS) transition - transition, transition-property

1) transition

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

속성 값

값	의미	기본값
transition-property	전환 효과를 사용할 속성 이름	all
transition-duration	전환 효과의 지속시간 설정	0s
transition-timing-function	타이밍 함수 지정(타이밍 함수란?)	ease
transition-delay	전환 효과의 대기시간 설정	0s

 

사용법

1. transition, transition-property, transition-duration

html

<div class="box"></div>

css

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

※ transition: width 1s, background 1s
= transition-property: width, background; transition-duration: 1s;
위의 두 코드는 동일한 효과를 가진다.
transition은 변화하기 전 상태의 박스에 입력해준다.

출력결과

 

 

2) transition-property

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

속성 값

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

 

사용법

html

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

css

.box1 {
  width: 100px;
  height: 100px;
  background: tomato;
  margin: 50px;
  transition: background 1s;
}
.box2 {
  width: 100px;
  height: 100px;
  background: tomato;
  margin: 50px;
  transition: width 1s;
}
.box3 {
  width: 100px;
  height: 100px;
  background: tomato;
  margin: 50px;
  transition: all 1s;
}
.box1:hover {
  width: 300px;
  background: dodgerblue;
}
.box2:hover {
  width: 300px;
  background: dodgerblue;
}
.box3:hover {
  width: 300px;
  background: dodgerblue;
}

.box1은 마우스를 올렸을때 background만 1초가 적용이 되고 width는 바로 전환
.box2는 마우스를 올렸을때 width만 1초가 적용이 되고 background는 바로 전환
.box3은 마우스를 올렸을때 all(background, width)가 1초가 적용되어 전환