CSS轉換，它是如何工作的？

我有一個簡單的CSS過渡和圖像懸停效果的代碼。 Codepen Demo CSS轉換，它是如何工作的？

background-color: rgba(0, 0, 0, 0.22); 
    -webkit-transition: all 0.2s ease; 
    -moz-transition: all 0.2s ease-in; 
    -o-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease; 
    visibility:hidden; 
    overflow:hidden;

能否請你解釋一下：

爲什麼這部分原因左至右動畫？（顯然是「所有」屬性）
```
transition: all 0.2s ease; 
```
我怎樣才能改變它做一個簡單的淡出，而不是左/右移動？我必須使用jQuery嗎？

由於克里斯

來源

2017-03-23 Kris Zap

您不需要所有這些供應商前綴。 –

意思是我可以擺脫-moz-和-o-？它還能在其他瀏覽器中工作嗎？ –

請參閱http://shouldiprefix.com/#transitions。 –

左到右是因爲 .item:hover .overlay和.item .overlay位置都 '左：0;'如果你將兩者都更改爲'right：0'你從右側獲得動畫向左
沒有jQuery是所需的淡入淡出效果，你可以只在.item .overlay和不透明度1在.item:hover .overlay

來源

2017-03-23 08:29:46 goosmaster

好吧，我明白了，那麼頂底動畫呢？ –

@KrisZap然後你必須改變with和height，注意.item .overlay 0％的寬度是，如果你將寬度改爲100％，高度改爲0％，你會得到一個從上到下的效果 – goosmaster

@KrisZap你還有什麼問題嗎？還是我回答了他們呢？ – goosmaster

添加兩個CSS屬性（不透明）的不透明度0更改CSS以下幾點：

.item .overlay { 
    position: absolute; 
    left: 0%; 
    top:0; 
    width: 0%; 
    height: 100%; 
    opacity:0; 
    background-color: rgba(0, 0, 0, 0.22); 
    -webkit-transition: opacity .3s ease-in-out; 
    -moz-transition: opacity .3s ease-in-out; 
    -o-transition: opacity .3s ease-in-out; 
    transition: opacity .3s ease-in-out; 
    overflow:hidden; 

}

而且懸停

.item:hover .overlay { 
    top: 0; 
    left: 0; 
    visibility: visible; 
    width: 100%; 
    height: 100%; 
    opacity: 1; 
}

Updated codepen demo

來源

2017-03-23 08:31:12

CSS轉換，它是如何工作的？

回答

相關問題