当前位置：文江博客话题详情

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

发布于 2024-11-13 01:28:33 字数 144 浏览 6 评论 0原文

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

贝塞尔曲线选项似乎允许最多的控制，但即使这样也不允许你指定一个实际的缓动方程来模拟弹性缓动等。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夜深人未静 2024-11-20 01:28:33

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

回复收藏 0 原文

ぇ气 2024-11-20 01:28:33

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

I found there is no way to do an elastic transition with pure CSS. However you can cheat and do a CSS animation. This is what apple uses on their site:

@-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); }
}

These animations are used to great extent on Apple's own website:
http://www.apple.com/mac/

Obviously this is powerful to some extent -- since the animations are percentages you can easily change he duration and retain the effect.

However, this is still very static. Let's say you want to click a button and have it perform an elastic scaling animation. No problem, one animation can be used over and over again for each button. But let's say you want to have an element elastically snap it's position to wherever the user most recently clicked or tapped on the screen. Well in this case you'd need to dynamically recalculate the keyframes and then apply the animation to the element.

At the time of this writing I don't know that there are any good examples of dynamically generating CSS animations on the fly inside of javascript. In fact it probably warrants another question. All in all this is the only pure CSS way I found to do render a complex easing equation such as elastic easing purely with CSS.

回复收藏 0 原文

寒冷纷飞旳雪 2024-11-20 01:28:33

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

http: //www.css3animationgenerator.com/

回复收藏 0 原文

酒与心事 2024-11-20 01:28:33

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

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

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

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

祝你好运！

回复收藏 0 原文

呆橘 2024-11-20 01:28:33

近似值：

根据OP请求“指定一个模拟弹性缓动的实际缓动方程”，现在可以使用线性()CSS函数(请参阅支持表）。

linear() approximation:

As per OP request to "specify an actual easing equation that would simulate elastic easing" it is now possible using the linear() CSS function (see support table).

???? MDN has a very detailed page explaining it

For the below demo I have used this online tool which generates CSS linear() values for a given javascript mathematical easing function or an SVG visualized representation of an easing graph.

Hover the demo to see it in action:

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
  )
}