[ITSkeleton] CSS transition 사용하기

<style>

.TransitionTest{

height:40px;

-webkit-transition:width 1s, height 1s, background-color 1s, -webkit-transform 1s;

transition:width 1s, height 1s, background-color 1s, transform 1s;

background-color:green;

}

.TransitionTest:hover{

height:200px;

}

</style>

<div class="TransitionTest">

기본 크기는 40px 입니다.

</div>

width 1s  -> 1초만에 width크기를 변경합니다.

height    ->  1초만에 height크기를 변경합니다.

background-color 1s -> 1초만에 bacground-color를 변경합니다

transform 1s -> 1초만에 지정된 transform으로 움직입니다.

아래쪽에 마우스를 올려보세요~

height를 변경하는 경우

기본 크기는 40px 입니다.

width를 변경하는 경우

기본 width는 100px 입니다.

background-color를 변경하는 경우

기본 색는 green 입니다.

transform:scale 을 변경하는 경우

Scale 2 만큼 커집니다.

transform:rotate 을 변경하는 경우

90deg만큼 회전

transform:translate 을 변경하는 경우

50px,100px 이동

위와 같은 방법으로 간단하게 구현할수 있습니다.

좀더 자세한 내용은

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

https://www.w3schools.com/css/css3_2dtransforms.asp

두개의 사이트를 이용해보시면 편하실거에요~