是否可以为CSS转换指定自定义定时函数？

我现在很频繁地使用CSS转换，但发现它仅限于只能访问缓入，缓出等贝塞尔曲线选项似乎允许最多控制，但即使这样也不允许指定实际缓动方程将模拟弹性缓动等。有没有另外的选择，或需要诉诸JavaScript来执行这种类型的动画？是否可以为CSS转换指定自定义定时函数？

来源

2011-06-01 Jim Jeffers

我发现没有办法用纯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进行弹性缓动。

来源

2011-06-23 18:53:29

我已经创建了一个javascript框架，以便从现在开始轻松完成此操作：https：//github.com/jimjeffers/Sauce – 2011-07-15 18:59:23

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

来源

2011-06-01 10:34:02 alex

感谢 - 这看起来像迄今最好的，但即使在这里 - 它不是可能做一些更复杂的事情，比如没有javascript的弹性缓解。 – 2011-06-22 13:57:39

相反，它是:)我真的很喜欢凯撒工具，但如果你想要弹性或弹性转换，请查看：http://www.css3animationgenerator.com/ - 这对凯撒 – 2012-05-16 16:35:49

哇！感谢那个伟大的参考 – 2013-06-08 03:57:02

我知道，如果你使用的mootools，你可以写你自己的公式：

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

类：Fx.Transition

这个类是只对数学有用想要编写自己的简化公式的天才。使用'easeIn'， 'easeOut'和'easeInOut'方法返回一个Fx 转换函数。

也许像jquery或prototype这样的其他库有相同的类，可能它们有类似的东西。

祝你好运！

来源

2011-06-01 10:39:23 pleasedontbelong

实际上，您并不需要JavaScript库来支持复杂缓动功能，如反弹缓入功能或弹性缓解功能。这里的CSS3动画产生工具产生的关键帧适合你，能够不被W3C规范支持12个额外的宽松政策功能：

http://www.css3animationgenerator.com/

来源

2012-05-16 16:24:02

感谢Eric，但这基本上与我的答案相同。这使用JavaScript通过Web窗体生成CSS关键帧动画。我的解决方案是相同的方法，除了我使用JavaScript声明式生成实时文档上的CSS关键帧。两者都有优点/缺点。我期望的是一个支持多个控制点的基于CSS的曲线。这将允许我们绕过这个javascript关键帧生成。 – 2012-05-18 21:39:39

是否可以为CSS转换指定自定义定时函数？

回答

相关问题