是否可以为CSS过渡指定自定义计时功能？

Question

我现在经常使用CSS过渡,但发现限制只能访问缓入,缓出等.贝塞尔曲线选项似乎允许最大程度的控制,但即使这样也不允许您指定实际的缓动方程会模拟弹性缓和等.是否有另一种选择或是否需要诉诸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 的弹性缓动。