Question

如何更改CSS转换加速和减速的加速度。

例如，如果我运行此代码：

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

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

<div></div>

它以特定速度加速并以特定速度开始减速。

如何更改加速和减速的速度（不是实际的过渡时间，只是加速和减速）

Answer 1

CSS3 transition-timing-function属性

transition-timing-function属性指定速度曲线   过渡效应。

此属性允许转换效果更改其速度   持续时间。

语法

DOCUMENTATION HERE w/ Examples

Answer 2

为此，您需要使用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>

Answer 3

在CSS中设置transition-timing-function：

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

可能的值：轻松|线性|安慰|缓和|易于进出| cubic-bezier（）|初始|继承

CSS过渡加速

3 个答案: