CSS: Don't ease each step in animation - css

Question

EDIT:
Looking back to this question, I see that it was formulated quite difficult, but to this day I'm still wondering whether it is possible.
My example really isn't that helpful or important. Maybe this will clear up things:
An animation (let's say w/ 4 steps) when set to ease it will always ease every step of the animation. My question is, whether it is possible to apply the animation timing function for all 4 steps altogether without having to run some complicated math w/ a cubic bezier
__
I was wondering if there was a way to apply CSS easing within an animation to the complete animation and not for each step.
My problem:
.animation {
animation: crazyAnimation 1s ease;
}
This will ease each step from this animation:
#keyframes crazyAnimation {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
What i was trying to achieve was a smooth bounce from 0 -> up 10px -> back down to 0.
The animation timing function ease will cause the animation to start slow at 0 -> speed up -> slow down to -10px -> speed up -> slow down to 0
What I was trying to achieve was the animation to start slow -> speed up -> and end slow when going back to 10px again.
I fixed it for now using this:
#keyframes crazyAnimation {
0% {
transform: translateY(0);
animation-timing-function: ease-in;
}
50% {
transform: translateY(-10px);
animation-timing-function: ease-out;
}
100% {
transform: translateY(0);
}
}
That only works for a 3 step animation though.
I hope I was able to describe the problem correctly, any ideas how to fix this?
I appreciate all the help.