✏ 예제1

.box:hover {
        background-color: blueviolet;
        transition-property: background-color;
        transition-duration: 500ms;
        transition-timing-function: linear;
			}

축약형

.box:hover {
        background-color: blueviolet;
        transition: background-color 500ms linear;
      }

✏예제2

.box2:hover {
        border-radius: 50%;
        background-color: cornflowerblue;
        transition: all 2s ease;
      }

✏예제3

.box3:hover {
        border-radius: 50%;
        transform: translate(400px);
        background-color: aquamarine;
        transition: all 2s cubic-bezier(0, 1.2, 0.66, 0.06);
      }

📣 링크 -transition-timing-function 미리보기

https://cubic-bezier.com