CSS3單向過渡？

使用CSS3轉換，可以對任何屬性進行「平滑」和「平滑」效果。CSS3單向過渡？

我可以把它安裝到只有一個「抹平」作用？我希望解決方案只能在CSS中使用，如果可能的話避免使用JavaScript。

邏輯流程：

用戶點擊元件
過渡花費0.5秒來從白色改變背景色爲黑色
使用者放開鼠標左鍵
過渡花費0.5秒到的將背景顏色從黑色變爲白色

我想要的：

用戶點擊元素
則轉移0改變
用戶放開鼠標按鈕的
過渡需要0.5秒改變...

有沒有「過渡式」時間，但是有一個'過渡'時間。

來源

2011-05-23 Abhishek

我在CSS3 Tryit編輯器中嘗試了以下操作，它在Chrome（12.0.742.60 beta-m）中工作。

/* transition out, on mouseup, to white, 0.5s */ 
 
input 
 
{ 
 
    background:white; 
 
    -webkit-transition:background 0.5s; 
 
    -moz-transition:background 0.5s; 
 
    -ms-transition:background 0.5s; 
 
    -o-transition:background 0.5s; 
 
    transition:background 0.5s; 
 
} 
 

 
/* transition in, on click, to black, 0s */ 
 
input:active 
 
{ 
 
    background:black; 
 
    -webkit-transition:background 0s; 
 
    -moz-transition:background 0s; 
 
    -ms-transition:background 0s; 
 
    -o-transition:background 0s; 
 
    transition:background 0s; 
 
}

<input type="button" value="click me to see the transition effect!">

來源

2011-05-23 03:33:56

衛生署！我不敢相信這不會發生在我身上......當然！基本轉換設置爲0，並且活動狀態轉換覆蓋基本值，並設置爲0.5s ...嘆息...我需要一杯咖啡... – Abhishek 2011-05-23 03:43:00

在我的情況下，我希望過渡到在懸停時發生延遲/發生，而不是懸停在外。一旦我閱讀了上述內容，解決方案就更簡單了：只需對：hover規則進行轉換，無需在其他任何地方取消任何內容。感謝您指出正確的方向，並有一個明確的例子。 – Schmuli 2012-06-04 19:31:27

感謝您的回答，我對它進行了測試，但在過渡設置相反時它適用於我（在Chrome中），我不知道規格是否已更改或某些內容 – 2016-10-04 13:12:41

CSS3單向過渡？

回答

相關問題