CSS 가상클래스 (1)-2_마우스 오버 효과(hover, transition) 추가!

hover와 transition을 가지고 놀다가

 

transition에 width와 height의 속도를 다르게 적용할 수 있는 것을 발견했다.

 

<div class="parent">
    <div class="child"></div>
</div>

 

.parent {
    width: 400px;
    height: 200px;
    position: relative;
}
.child {
    position: absolute;
    width: 25px;
    height: 25px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: blueviolet;
    transition: width 0.95s, height 1s;
}
.child:hover {
    width: 100%;
    height: 100%;
    background-color: rgb(216, 179, 250);
    transition: width 1s, height 0.25s;
}

 

 

위의 결과처럼 transition을 적용할 때

width와 height를 따로 적용시켜줄 수 있다.

 

또한 hover일 때와 아닐 때도 따로 적용을 해줄 수 있어서

역시 원하는대로 조절을 할 수 있다.

 

 

transition 시간을 반대로 조절했을 때는

.parent {
    width: 400px;
    height: 200px;
    position: relative;
}
.child {
    position: absolute;
    width: 25px;
    height: 25px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: blueviolet;
    transition: width 0.95s, height 1s;
}
.child:hover {
    width: 100%;
    height: 100%;
    background-color: rgb(216, 179, 250);
    transition: width 0.2s, height 1.2s;
}