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

回答

相關問題