控制轉換的起點CSS

我有一個div，其中包含當鏈接懸停時用CSS轉換/轉換的文本。然而，我不明白它爲什麼會起作用，並且當我使用這些值時，它會改變divs結束位置（絕對居中和垂直居中）。我想改變的div起始位置控制轉換的起點CSS

HTML

<div class="bg-img" style="background-image:url('...');"> 

    <a href="#" class="linkage"></a> 

    <!-- Put cat div overtop article --> 
    <div class="cat-cell"> 
     text is here 
    </div> 

</div>

CSS

.cat-cell { 
    position: absolute; 
    top: 50%; right: 0; left: 0; bottom: auto; 
    margin: 0 auto; 
    z-index: 9; 
    opacity: 0; 
    text-align: center; 
    max-width: 60%; 

    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease;  
    transition: all 0.5s ease;  
} 

.linkage:hover + .cat-cell { 
    opacity: 1; 

    -webkit-transform: translateY(-50%); 
    -moz-transform: translateY(-50%); 
    -o-transform: translateY(-50%); 
    transform: translateY(-50%); 
}

的的.cat單元格淡入，並從父母的底部向上移動的div一定量的父div的中心。我想縮短它向上移動的數量（看起來它向上移動大約100px，我希望它只能移動50來到達中心）。但是，當我更改任何值時，它不再位於轉換結束時的父級中。

來源

2015-06-12 user3550879

轉換的開始位置由初始狀態（.cat-cell CSS）決定。

translateY(-50%)每當.linkage：hover變爲「active」時，它會將.cat-cell上移50％的自己的大小。

所以.linkage:hover + .cat-cell設置你的元素的最終狀態，而transition: all 0.5s ease告訴瀏覽器顯示的轉變可能屬性值的變化（在這種情況下，opacity和transform）。

另外，最好不要使用transition: all 0.5s ease，因爲瀏覽器會嘗試轉換元素的所有屬性。改爲使用transition: transform 0.5s ease, opacity 0.5s ease。

來源

2015-06-12 11:08:25 BillyNate

很好的第一個答案。 –

所以我怎樣才能改變它的開始/初始狀態，同時仍然確保過渡結束在目前的位置。另外，改變轉換：轉換0.5s緩解;完全移除動作 – user3550879

更改'.cat-cell'（'top'，'left'，'right'，'bottom'）的位置以更改起始位置。您可能還需要更改'translateY'以彌補因改變起始位置而導致的差異。在這種情況下，您可能希望保留'transition：all'，因爲廠商前綴（-moz，-o-）。只是想告訴你，在大多數情況下，這被認爲是壞習慣。 – BillyNate

控制轉換的起點CSS

回答

相關問題