CSS timing functions always seem to be between 2 points:
Even with custom bezier curves, your curve can only go from one point to another.
Is it possible to make a custom CSS timing function, where you can make a curve that consists of multiple points?
We have the following timing functions.
transition-timing-function: ease;
transition-timing-function: linear;
transition-timing-function: step-end;
transition-timing-function: steps(4, end);
I hope in the future we get more. For now, we have to fiddle with the percentages of the time to create the custom timing like:
@keyframes wordsAnimationZoomIn{
0%{
opacity: 0;
}
25%{
opacity: 0.5;
}
75%{
opacity: 0.5;
}
100%{
opacity: 1;
}
}
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions