The first transform is represented by a matrix. It is to express the transform effects such as translate, rotate, etc. together in a matrix.
The second transition-delay represents the delay, that is, how long does each transition start after it is triggered. Each one corresponds to the following attributes.
The third transition-duration represents the transition time of each attribute, which also corresponds to one-to-one.
The fourth transition-property is the property name for transition animation, including transform and transparency (a compatible transform is added)
The fifth transition-timing-function is the transition effect speed curve, in addition to linear changes (Constant speed), ease-XX (the one provided is divided into three sections, first fast and then slow), you can also use Bezier curve cubic-bezier(n,n,n,n), Bezier curve The Searle curve can create the rebound effect you mentioned (that is, exceeding the maximum or minimum value and then rebounding)

Attach an address for making Bezier curve

Supplement:
1. Only one transition needs to be written. If it is written in the normal state, the transition effect will be applied when moving in and out. If written in :hover, only moving in will have a transition
//Modified the code in your comment

.reat {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    opacity: 0;
    transform: rotate(15deg);
    background-color: red;
    /*貝塞爾曲線選取的不合適，無回彈,第四個參數要超出最大值 (即1.51)*/
    transition: transform 1s cubic-bezier(.17,.67,.48,1.51), opacity 1s ease;
}
            
.reat:hover {
    /*同名屬性要寫在一起，否則後面的會覆蓋前面的*/
    transform: scale(1.8) rotate(0);
    opacity: 1;
    box-shadow: 4px 14px 0 rgba(0, 0, 0, .125);
}

You can refer to this article about transform and transition in CSS
There is detailed information on it

transition:all 1s;
Transition effect, complete animation in 1 second.