[英]How to make custom CSS animation/transition timing function
CSS timing functions always seem to be between 2 points: CSS计时功能似乎总是介于2点之间:
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? 是否可以制作自定义CSS计时功能,在其中可以制作由多个点组成的曲线?
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 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.