transition 은 css3에 추가된 속성으로 ie10 이상부터 사용이 가능하다.
명시적으로 원하는 영역에 어떤 속성을 움직이게 할지,
언제 애니메이션을 시작하게 할지, 얼마나 애니메이션을 지속할지,
그리고 어떻게 애니메이션을 실행할지에 대한 값을 지정하는 속성이다.
| 속성 | 설명 |
| transition |
transition 속성을 사용하는 축약형으로, 순서대로 작성시 transition: property || duration || timing-function || delay 순서로 작성하게 된다. |
| transition-property | transition 효과를 줄 css 속성을 설정한다. |
| transition-duration | transition 효과가 지속될 시간을 설정한다. |
| transition-timing-function | transition 효과가 실행될 때의 효과를 설정한다. (easing) |
| transition-delay | transition 효과를 시작하기 전까지의 대기 시간을 설정한다. |
1. transition-property
원하는 css 속성에 transition 효과를 지정할 수 있고
지정한 css 속성만이 transition 효과를 가질 수 있다.
<style>
.box{margin-bottom:8px; width:50px; height:50px; background:skyblue;}
.box1{transition-property:all;} /* 모든 css 속성(all)에 transition을 적용한다. */
.box2{transition-property:width;} /* width 속성에만 적용 */
.box3{transition-property:width, height;} /* width, height 속성에 적용 */
</style>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</body>
2. transition-duration
transition 효과의 지속 시간을 정한다.
<style>
.box{
margin-bottom:8px;
width:50px;
height:50px;
background:skyblue;
transition-duration:0.5s; /* transition 효과를 2초 동안 지속 */
}
.box1{transition-property:all;}
.box2{transition-property:width;}
.box3{transition-property:width, height;}
</style>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</body>
3. transition-timing-function
transition 효과가 일어나는 효과를 줄 수 있다.
기본 값은 ease 효과이고
linear, steps, ease-in, ease-out
그리고 cubic-bezier(n,n,n,n)을 이용해서 원하는 효과를 만들 수도 있다.
<style>
.box{
margin-bottom:8px;
width:50px;
height:50px;
background:skyblue;
transition-duration:0.5s;
}
/* 기본 효과인 ease */
.box1{
transition-property:all;
}
/* ease-in 효과 */
.box2{
transition-property:width;
transition-timing-function:ease-in;
}
/* steps 효과 */
.box3{
transition-property:width, height;
transition-timing-function:steps(4, end);
}
</style>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</body>
4. transition-delay
transition 효과가 일어나기 전 대기 시간을 정한다.
<style>
.box{
margin-bottom:8px;
width:50px;
height:50px;
background:skyblue;
transition-duration:0.5s;
}
.box1{
transition-property:all;
transition-delay:0.5s;
}
.box2{
transition-property:width;
transition-timing-function:ease-in;
transition-delay:0.3s;
}
/* transition-delay값 미입력시 delay없음 */
.box3{
transition-property:width, height;
transition-timing-function:steps(4, end);
}
/* transition 확인을 위한 hover시 효과 적용 */
.box:hover{width:100px; height:100px; background:red;}
</style>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</body>
위에서 배운 transition 효과를 적용한 화면을 보자면 아래와 같다.
첫 번째 상자는 delay가 0.5초가량 된 후 width, height, background의 transition 효과가 적용이되고
두 번째 상자는 width값만 ease-is의 효과를 가지며 transition이 적용된다.
세 번째 상자는 width, height 값이 steps 효과를 가지며 transition이 적용된다.
'Frontend > CSS' 카테고리의 다른 글
| [css 응용] 이미지 세로 중앙 정렬 (0) | 2020.05.23 |
|---|---|
| [css 단위] vw, vh, vmin, vmax (Viewport 단위) (0) | 2020.04.22 |
| [css 속성] z-index 우선순위 주기, z-index -(음수) 처리 (0) | 2020.03.31 |
| [css 속성] float (float 해제, clear) (0) | 2020.03.24 |
| [css 속성] position (static, relative, absolue, fixed) (0) | 2020.03.23 |
