body {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100vh; 
}

.box-red,
.box-green,
.box-blue,
.box-yellow {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    cursor: pointer;
}

.box-red {
    background-color: #f00;
    transition-property: background-color,width,height;
    transition: 3s ease 1s;
    /* transition-duration: 3s; */
}

.box-red:hover{
    background-color: #ff0;
    transition-property: background-color,width,height;
    transition-duration: 1s;
    transition-timing-function: ease-in;
    transition-delay: 2s;
    width: 20px;
    height: 200px;
}

.box-green {
    background-color: green;
    transition: all 1s linear 2s;
}

.box-green:hover {
    transition: all 1s cubic-bezier(.29, 1.01, 1, -0.68);
    background-color: rgb(255,0,208);
    width: 350px;
    height: 350px;
    border-radius: 8px;
}

.box-blue {
    background-color: blue;
    transition: all 1s linear 2s;
}

.box-blue:hover{
    transition: width 2s ease-in-out 0S;
    width: 350px;
}

.box-yellow {
    background-color: #ff0;
    transition: all 2s linear 1s;
}

.box-yellow:hover{
    opacity: 0;
    transition: opacity 1s linear 0s;
}