在動畫父寬度的同時居中圖像？

我有一個div充當圖像的視圖端口。我希望div在鼠標懸停時擴大寬度，並讓內部圖像保持移動並保持居中。下面的代碼不正是我想要的東西：在動畫父寬度的同時居中圖像？

HTML CSS &

.image { 
 
    width: 10%; 
 
    background: transparent center center; 
 
    height: 200px; 
 
    transition: width 2s cubic-bezier(.15, .88, 0, .99); 
 
    -o-transition: width 2s cubic-bezier(.15, .88, 0, .99); 
 
    -ms-transition: width 2s cubic-bezier(.15, .88, 0, .99); 
 
    -moz-transition: width 2s cubic-bezier(.15, .88, 0, .99); 
 
    -webkit-transition: width 2s cubic-bezier(.15, .88, 0, .99); 
 
} 
 
.image:hover { 
 
    width: 70%; 
 
}

<div class="image" style="background-image:url(http://www.oxfordproperties.com/corp/images/investmentCaseStudy/900NewYorkAvenue-main.jpg);"></div>

它是把圖像的URL的樣式屬性我不喜歡的唯一的事情。我寧願我的HTML標記看起來像這樣：

HTML

<div class="image2"> 
    <img src="http://www.oxfordproperties.com/corp/images/investmentCaseStudy/900NewYorkAvenue-main.jpg" /> 
</div>

我使用這個CSS代碼來達到同樣的效果嘗試：

.image2 { 
 
    position: relative; 
 
    width: 10%; 
 
    height: 200px; 
 
    overflow: hidden; 
 
    transition: width 2s cubic-bezier(.15, .88, 0, .99); 
 
    -o-transition: width 2s cubic-bezier(.15, .88, 0, .99); 
 
    -ms-transition: width 2s cubic-bezier(.15, .88, 0, .99); 
 
    -moz-transition: width 2s cubic-bezier(.15, .88, 0, .99); 
 
    -webkit-transition: width 2s cubic-bezier(.15, .88, 0, .99); 
 
} 
 
.image2:hover { 
 
    width: 70%; 
 
} 
 
.image2 img { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div class="image2"> 
 
    <img src="http://www.oxfordproperties.com/corp/images/investmentCaseStudy/900NewYorkAvenue-main.jpg" /> 
 
</div>

但這個問題在於，在Windows 10上的Chrome中，圖像中出現了一些顛倒（至少在我的電腦上）。當div寬度縮小時，div寬度等於img寬度時會出現短暫的晃動。我該如何擺脫這種顛簸效應？它似乎沒有發生在Edge瀏覽器上。

有沒有更好的方法來寫我的CSS，使事情的行爲完全像我的第一種方法？

來源

2016-09-30 John

我覺得這是一個非常具體的鍍鉻的問題，也許WebKit的？似乎是我使用的唯一瀏覽器，顯示如此波濤洶涌的過渡。 – Serlite

@Serlite讓我知道如果你能想到基於HTML標記的替代css實現？我正在與一位期望在他們的界面中保持優質品質的客戶合作。我也試着讓WCAG兼容，所以有意義的標記會很好。我理論上可以使用Javascript將圖像的src屬性複製到div樣式屬性中，但寧願避免使用bandaids。 – John

我見過的唯一選擇是通過執行3d'transform：translate3d（-50％，-50％，0）;來強制硬件加速。 – Daniel

看看這個，我添加了will-change: transform;到.image2 img這意味着它會給GPU提供動畫。它對你更好嗎？

下面是一些info它

.image2 { 
 
    position: relative; 
 
    width: 10%; 
 
    height: 200px; 
 
    overflow: hidden; 
 
    transition: width 2s cubic-bezier(.15, .88, 0, .99); 
 
    -o-transition: width 2s cubic-bezier(.15, .88, 0, .99); 
 
    -ms-transition: width 2s cubic-bezier(.15, .88, 0, .99); 
 
    -moz-transition: width 2s cubic-bezier(.15, .88, 0, .99); 
 
    -webkit-transition: width 2s cubic-bezier(.15, .88, 0, .99); 
 
} 
 
.image2:hover { 
 
    width: 70%; 
 
} 
 
.image2 img { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    will-change: transform; 
 
}

<div class="image2"> 
 
    <img src="http://www.oxfordproperties.com/corp/images/investmentCaseStudy/900NewYorkAvenue-main.jpg" /> 
 
</div>

來源

2016-09-30 18:57:53

在動畫父寬度的同時居中圖像？

回答

相關問題