如何制作自定义 CSS 动画/过渡计时功能

【问题标题】：How to make custom CSS animation/transition timing function如何制作自定义 CSS 动画/过渡计时功能
【发布时间】：2018-07-15 11:01:17
【问题描述】：

CSS 计时函数似乎总是介于 2 点之间：

即使使用自定义贝塞尔曲线，您的曲线也只能从一个点移动到另一个点。

是否可以做一个自定义的 CSS 计时函数，在其中可以制作一个由多个点组成的曲线？

【问题讨论】：

标签： css animation css-transitions css-animations easing-functions

【解决方案1】：

我们有以下计时功能。

transition-timing-function: ease;
transition-timing-function: linear;
transition-timing-function: step-end;
transition-timing-function: steps(4, end);

我希望将来我们能得到更多。现在，我们必须摆弄时间百分比来创建自定义时间，例如：

@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

【讨论】：