.sample1:hover {
    transition-duration: 2s;
    background: deeppink;
}
           

.sample2-1:hover {
    width: 150px;
    height: 150px;
    transition-duration: 2s;
    transition-property: width;
    background: deeppink;
} 

.sample2-2:hover {
    width: 200px;
    height: 150px;
    background: deeppink;
    transition-duration:  2s, 4s, 6s;
    transition-property:
        width,
        height,
        background;
}

.sample3:hover {
    transition-duration: 2s;
    transition-delay: 2s;
    background: deeppink;
}
           

.sample4:hover {
    transition-delay: 2s;
    transition-duration: 3s, 4s;
    transition-property: width, background;
    transition-timing-function:
    cubic-bezier(.92, -0.33, .13, 1.47);
    width: 250px;
    background: deeppink;
}
           

sample5:hover {
   width: 250px;
   transition: width 2s ease 0.5s;
}

transition: all .5s;