问题标签 [cubic-bezier]

我有一个 div，其中包含一些幻灯片和菜单。

谁能向我解释一下过渡属性在这里的作用？

我无法理解它将对 div 产生的影响。

我有以下 CSS 规则：

当我将鼠标悬停在 Chrome、IE 和 Edge 中的 div 上时，我会看到宽度从 10% 变为 100%。

当我将鼠标悬停在 Chrome 中的 div 上时，动画速度开始很快，结束很慢。当我鼠标移开时，动画速度开始很快，结束很慢。

当我将鼠标悬停在 IE 11 或 Edge 中的 div 上时，动画速度开始快，结束慢。当我鼠标移开时，动画速度开始缓慢并很快结束。

我可以让 IE11 和 Edge 的行为与 Chrome 相同吗？如果是这样，我该怎么做？

我目前正在尝试创建一个菜单叠加层，当用户按下角落的按钮时，它会填满屏幕。我希望菜单项以交错的顺序淡入，就像在此处的网站上所做的那样：http: //bravepeople.co/

我有大部分工作，但是菜单项仅在第一次按下菜单按钮时淡出，然后它们只是第二次弹出（第一项除外）。有人能弄清楚如何让它正常工作吗？

这是我在CodePen中的代码。

这是我的html：

我的 CSS：

和我的 Javascript：

编辑：我忘了提到我的原始 HTML 使用来自 Bootstrap 的 CSS 文件，其中包含重置。我已经添加了一个引导 CDN 的链接。

我正在尝试制作带有三次图的 LineChart。结果如下面的截图所示：三次贝塞尔曲线显示错误并且有“尖峰”。有人可以帮我让它正确显示吗？

这是我的配置：

谢谢

我有水动画。我想要两个keyframes有cubic-bezier(1,.41,.74,.45)，第三个有cubic-bezier(.38,.8,.68,.09)。换句话说，我需要波浪首先以相同的方式循环 2 次，最后一次以不同的方式循环。总的来说，动画中有3个keyframe循环。有没有办法cubic-bezier为不同的关键帧指定不同的 s 或为相同的元素应用不同的动画？

纯CSS。没有额外的元素。

这是动画第一部分的示例，这是第二部分的示例。

我的目标是用 JavaScript 编写一个动画来执行缓入式贝塞尔曲线动画（例如在http://cubic-bezier.com/#.42,0,.58,1中）

我想出了以下脚本来计算给定“x”值（时间）的 y 值：

使用Wikipedia中的显式公式：

演示 - https://codepen.io/anon/pen/QpRzBg

但是，打印语句显示 Y 值在上升之前下降，而它应该只上升：

我确实设法找到了似乎有效的其他人的代码，这是输出：

演示 - https://codepen.io/anon/pen/evabrr

两个演示都使用相同的输入：p0 = .42, p1 = 0, p2 = .58, p3 = 1

我不知道为什么我的尝试失败了，而且我找到的代码有效。我是否错误地执行了公式？我选择了错误的公式吗？还有什么？

我正在将应用程序从 javascript 移植到 UWP c#，并且正在努力使用新的InkCanvas。如果您熟悉 UWP 中的新 InkCanvas，我将非常感谢您的帮助。这是我编写的将 InkStroke 渲染到 Canvas 上的代码。

不幸的是，控制点似乎搞砸了，我不明白为什么。

您可以在下面看到我运行此代码的图像。黑色笔划是最初在 InkCanvas 中渲染的，红色笔划是上面代码中在 Canvas 上渲染的笔划。

黑色笔划是最初在 InkCanvas 中渲染的，红色笔划是上面代码中在 Canvas 上渲染的笔划

任何人都知道我做错了什么？

我正在使用这篇文章：nonlingr as a font to understand non linear transformations，在GLYPHS ALONG A PATH他解释如何使用参数曲线来转换图像的部分中，我正在尝试将三次贝塞尔曲线应用于图像，但是我一直不成功，这是我的代码：

在 300x196 rgb 图像中应用此代码，无论我使用什么控制点，我得到的都是黑屏，很难找到有关这种变换的信息，搜索参数曲线我发现的只是如何绘制它们，不适用于图片。有人可以帮助我如何用贝塞尔曲线转换图像吗？

这个问题和这个问题都展示了如何沿着曲线以特定的参数化值 0 ≤ t ≤ 1 分割三次贝塞尔曲线，从两个新段组成原始曲线形状。我需要在我知道其坐标的曲线上的一个点处分割我的贝塞尔曲线，但不是该点的参数化值t。

例如，考虑 Adob​​e Illustrator，用户可以单击曲线将点添加到路径中，而不会影响路径的形状。

假设我在曲线上找到最接近用户点击位置的点，我该如何计算控制点？给定曲线上的一个点，是否有分割贝塞尔曲线的公式？

或者（并且不太理想），给定曲线上的一个点，有没有办法确定与该点对应的参数化值t（除了在二分搜索中使用 De Casteljau 算法）？

我的贝塞尔曲线恰好只是二维的，但一个很好的答案将包括应用于任意维度所需的向量数学。

假设我有以下内容：

CSS

jQuery

HTML

它运行不是线性的 css3 动画。在动画运行之前，我需要获得 30%（或任何其他）的动画值。如何得到它？我创建了一个小提琴：https ://jsfiddle.net/syom777/xnpfzyoL/8/

更新：这里有类似的讨论：CSS3动画“进度”回调

我认为我们可以应用另一种方式来获得它，因为在三次贝塞尔曲线（0.39, 0.575, 0.565, 1) 行中我们有动画算法，所以应该有一种方法可以从那里获得任何值。

谢谢。