SOURCE

<div class="flex">
    <div class="content">
        steps(3, start&and)
        <div class="box step"></div>
    </div>
    <div class="content bezier">
        bezier(0.1, 0.5, 0.5, 0.1)
        <div class="box"></div>
    </div>
    <div class="content">
        ease
        <div class="box ease"></div>
    </div>
    <div class="content">
        linear
        <div class="box linear"></div>
    </div>
    <div class="content">
        ease-in
        <div class="box ease-in"></div>
    </div>
    <div class="content">
        ease-out
        <div class="box ease-out"></div>
    </div>
    <div class="content">
        ease-in-out
        <div class="box ease-in-out"></div>
    </div>
    <div class="content">
        step-start
        <div class="box step-start"></div>
    </div>
    <div class="content">
        step-end
        <div class="box step-end"></div>
    </div>
</div>

.flex {
    display: flex;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}
.content {
    width: 200px;
    height: 100px;
    border: 1px solid #000;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
}
.box {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
    transition-property: all;
    transition-duration: 4s, 3s;
    transition-delay: 0s, 0s;
}
.content:hover .box {
    top: 90px;
    left: 190px;
}
.step {
    transition-timing-function: steps(3, start);
}
.ease {
    transition-timing-function:ease;
}
.linear {
    transition-timing-function:linear;
}
.ease-in {
    transition-timing-function:ease-in;
}
.ease-out {
    transition-timing-function:ease-out;
}
.ease-in-out {
    transition-timing-function:ease-in-out;
}
.step-start {
    transition-timing-function:step-start;
}
.step-end {
    transition-timing-function:step-end;
}
.bezier {
    transition-timing-function: bezier(0.1, 0.3, 0.5, 0.1);
}