为 CSS 转换指定自定义计时函数？

Question

我现在经常使用 CSS 过渡，但发现它仅限于只能访问缓入、缓出等。

bezier-curve

选项似乎允许最大程度的控制，但即使这样也不允许您指定模拟弹性缓动等的实际缓动方程..

是否还有另一种选择，或者是否需要借助 javascript 来执行这种类型的动画？

Answer 1

您可以使用Caesar为不同的方程生成CSS。

Answer 2

我发现没有办法用纯 CSS 来做弹性过渡。不过你可以作弊并制作 CSS 动画。这是苹果在其网站上使用的内容：

@-webkit-keyframes open-1 {
    from { opacity:0; -webkit-transform:translate3d( 210px, -145px, 0); }
    25%  { opacity:1; -webkit-transform:translate3d( -15.6px, 4.1px, 0); }
    30%  { opacity:1; -webkit-transform:translate3d( -10.3px, 2.7px, 0); }
    35%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
    40%  { opacity:1; -webkit-transform:translate3d( 4.5px, -1.2px, 0); }
    45%  { opacity:1; -webkit-transform:translate3d( 2.9px, -0.8px, 0); }
    50%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
    55%  { opacity:1; -webkit-transform:translate3d( -1.3px, 0.3px, 0); }
    60%  { opacity:1; -webkit-transform:translate3d( -0.8px, 0.2px, 0); }
    65%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
    70%  { opacity:1; -webkit-transform:translate3d( 0.4px, -0.1px, 0); }
    75%  { opacity:1; -webkit-transform:translate3d( 0.2px, -0.1px, 0); }
    80%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
    85%  { opacity:1; -webkit-transform:translate3d( -0.1px, 0, 0); }
    90%  { opacity:1; -webkit-transform:translate3d( -0.1px, 0, 0); }
    to   { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
}

这些动画在苹果自己的网站上大量使用： http://www.apple.com/mac/

显然这在某种程度上是强大的——因为动画是百分比，你可以轻松地改变持续时间并保留效果。

但是，这仍然是非常静态的。假设您想要单击一个按钮并让它执行弹性缩放动画。没问题，每个按钮都可以反复使用一个动画。但是，假设您希望一个元素能够将其位置弹性地捕捉到用户最近在屏幕上单击或点击的位置。在这种情况下，您需要动态地重新计算关键帧，然后将动画应用到元素。

在撰写本文时，我不知道有什么好的例子可以在 javascript 中动态生成 CSS 动画。事实上，这可能还值得提出另一个问题。总而言之，这是我发现的唯一纯 CSS 方式来渲染复杂的缓动方程，例如纯粹使用 CSS 的弹性缓动。

Answer 3

实际上，您不需要 JavaScript 库来支持复杂的缓动功能，例如“bounce-ease-in”或“elastic-ease-out”。这是 CSS3 动画生成器工具，它可以为您生成关键帧，并启用 w3c 规范不支持的 12 个附加缓动功能：

http://www.css3animationgenerator.com/

Answer 4

我知道，如果您使用 mootools，您可以编写自己的方程式：

http://mootools.net/docs/core/Fx/Fx.Transitions

类：Fx.Transition

本课程仅对数学有用 想要写自己的天才 缓和方程。返回一个 Fx 带有“easeIn”的过渡函数， 'easeOut' 和 'easeInOut' 方法。

也许其他库（如 jquery 或 prototype）具有相同的类，可能它们确实有类似的东西。

祝你好运！

Answer 5

线性()近似：

根据 OP 请求“指定一个模拟弹性缓动的实际缓动方程”，现在可以使用

linear()

CSS 函数（参见支持表）。

💡 MDN 有一个非常详细的页面解释它

对于下面的演示，我使用了这个在线工具，它为给定的 JavaScript 数学缓动函数或缓动图的 SVG 可视化表示生成 CSS

linear()

值。

将鼠标悬停在演示上以查看其实际效果：

body{ 
  height: 100vh; 
  display: grid;
  place-items: center;
}

body:hover div {
  scale: 2;
  background: blue;
}

div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: red;
  transition: 1s linear(
    0, 
    1.114 8.5%, 
    1.37 12.9%, 
    1.315 16.2%, 
    0.941 24%, 
    0.869 27.8%, 
    0.882 30.7%,
    1.012 38.3%, 
    1.046 42.7%, 
    0.984, 
    1.006 72.2%, 
    1
  )
}

<div></div>