CSS转换加速

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

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

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

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

<div></div>

它以特定的速度加快，并开始以特定的速度放缓。

我怎样才能改变它的速度有多快加速和减慢（不是实际的过渡时间，只是加速和减速）

来源

2015-01-17 kirill2485

CSS3过渡定时功能物业

速度
转换定时功能属性指定转换效果的速度曲线。

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

语法

DOCUMENTATION HERE w/ Examples

来源

2015-01-17 04:34:06 Rafael

在你的CSS设置transition-timing-function：

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

可能的值：缓解|线性|缓解|缓解|缓出来| cubic-bezier（）|初始|继承

来源

2015-01-17 04:38:35 hugohabel

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

来源

2015-01-17 05:20:10

回答

相关问题