transition 간단한 실습

See the Pen transition 실습1 by nilgi (@nilgi) on CodePen.

 

.box1 {
    width: 200px; // 가로: 200
    height: 35px; // 세로: 35
    overflow: hidden; // 영역을 넘어서는 내용: 숨김 
    transition: width 4s, height 3s; // 전환: 가로 4초, 세로 3초
}

.box1:hover { // .box1에 마우스를 올렸을 때
    width: 350px; // 가로: 350
    height: 270px; // 세로: 270
}