cssanimationcss-transitionscss-animationseasing-functions

How to make custom CSS animation/transition timing function


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?


Solution

  • 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