How to make custom CSS animation/transition timing function [duplicate]

Question

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?

I have been using this tool for years: cubic-bezier.com

vsync
– vsync

2024-04-10 12:10:42 +00:00
Commented Apr 10, 2024 at 12:10 — vsync
– vsync, Commented Apr 10, 2024 at 12:10

Running Buffalo · Accepted Answer · 2016-09-27 22:53:40Z

1

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

answered Sep 27, 2016 at 22:53

Running Buffalo

1,3232 gold badges11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to make custom CSS animation/transition timing function [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related