CSS过渡加速

Question

CSS过渡加速

5

如何改变CSS过渡加速和减速的速度。

例如，如果我运行以下代码：

<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    transition-duration: 4s;
}

div:hover {
    width: 200px;
    background: blue;
}
</style>
</head>
<body>

<div></div>

它会在特定的速度加速，并在特定的速度开始减速。

我该如何改变它加速和减速的速度（不是实际的过渡时间，而是加速和减速的速度）？

- kirill2485

3个回答

4

为此，您需要使用transition-timing-function属性。
从W3C：

transition-timing-function属性描述了如何计算在过渡期间使用的中间值。它允许过渡在其持续时间内更改速度。这些效果通常称为缓动函数。

现在，您想创建一个减速过渡。为此，您需要查看减速位置 - 时间图并创建一个类似于它的cubic-bezier()函数。

enter image description here

调整cubic-bezier函数的值以满足您的需求。
代码段：：

div {
    width: 100px;
    height: 100px;
    background: red;
    transition-duration: 1s;
    transition-timing-function:cubic-bezier(0.2,0.5,0.3,1);
}

div:hover {
    width: 200px;
    background: blue;
}

<div></div>

- The Pragmatick

抱歉打扰，但是有可能要么a)找到/定义一个指数增长函数来缓解，或者b)将这个三次贝塞尔曲线反转，就像1/x一样吗？基本上是为了得到相反的加速度。 - Barry Chapman

0

在您的CSS中设置transition-timing-function。

transition-timing-function: ease-in-out;

- hugohabel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rafael · Accepted Answer

CSS3 transition-timing-function 属性

transition-timing-function 属性指定了过度效果的速度曲线。

该属性允许过度效果在其持续时间内改变速度。

语法

文档及示例请参考此处