#transition {
    width: 300px;
    height: 300px;
    background-color: yellow;

    /* ➊ 변화 과정을 보여 주고자 하는 속성은 width입니다. */ 
    transition-property: width;

    /* ➋ width 300px에서 width 600px로 바뀌는 데 걸리는 시간은 3초입니다. */
    transition-duration: 3s;

    /* ➌ 초반은 느리게, 중반은 빠르게, 종반은 느리게 변화가 진행됩니다. */
    transition-timing-function: ease;

    /* ➍ 마우스 포인터를 올렸을 때 1초 후에 변화가 시작됩니다. */
    transition-delay: 1s;
}

    /* ➎ #transition에 마우스 포인터를 올렸을 때 width 속성값이 600px로 바뀝니다. */
#transition:hover {
    width: 600px;
}