.square {
    width: 250px;
    height: 250px;
    margin: 1rem 0 2rem 1rem;
    background-color: blue;
}

/* Blue to green */
#color .square {
    transition-property: background-color;
    transition-duration: 5s;
}

    #color .square:hover {
        background-color: green;
    }


/* Square to circle */
#circle .square {
    transition: border-radius 2s 5s, background-color 3s 2s;
}

    #circle .square:hover {
        border-radius: 50%;
        background-color: purple;
    }