CSS: Use of the cubic-bezier timing function to create custom timing of animations (instead of ease, ease-in, etc)

css_cubic-bezier.css

:root {
    --main-color: blue;
}

.hover-text {
    transition: all 3s;
}

.hover-text:hover {
    color: var(--main-color);
    font-size: 20px;
}

//www.cubic-bezier.com to use their handy graph that generates graph coordinates for you
.box {
    position: fixed;
    width: 50px;
    height: 50px;
    background: red;
    border: 1px solid black;
    animation: size-down cubic-bezier(1,0,1,1) 0.5s 1 alternate both;

}

@keyframes size-down {
    100% {transform: scale(0.3, 0.3); background: var(--main-color);}
}