CSS 트랜지션 예제

마우스를 올려 놓고 내릴 때 애니메이션을 주는 방법이다.

 

div {

    width: 100px;

    height: 100px;

    background-color: mistyrose;

    /* width와 background-color에 transition을 준다. */

    transition-property: width, background-color; 

    /* 변화 속도를 지정한다. */

    transition-duration: 1s, 2s;

}

 

/* 마우스를 엘리먼트 위에 올려 놓을 때 */

div:hover { 

    width: 200px;

    background-color: honeydew;

}

 

참고 : https://poiemaweb.com/css3-transition