[css 속성] transition

2020. 4. 21. 15:28

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

About Web