css3 - CSS backgroudn transition, what's wrong here? -
i feel cursed never background color transition correct , it's making me feel inadequate...
it not transition between background colors, "blips" 1 next without transition @ all. doing wrong?
<div class="flowitem"> test </div> .flowitem { -webkit-transition: background 1000ms linear; -moz-transition: background 1000ms linear; -ms-transition: background 1000ms linear; -o-transition: background 1000ms linear; transition: background 1000ms linear; } .flowitem:hover { background-image: -moz-linear-gradient(top, #e0ffff, #87ceeb); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #e0ffff), color-stop(1.0, #87ceeb)); }
background images can't “transitioned” other properties: should intermediate value of background-image during transition?
as workaround apply background pseudoelement, position: absolute , negative z-index. can show pseudoelement animating opacity property, so
https://jsfiddle.net/45vdd8fl/4/
.flowitem { position: relative; } .flowitem::before { -webkit-transition: opacity 1s linear; -moz-transition: opacity 1s linear; -ms-transition: opacity 1s linear; -o-transition: opacity 1s linear; transition: opacity 1s linear; content: ""; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-image: -moz-linear-gradient(top, #e0ffff, #87ceeb); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #e0ffff), color-stop(1.0, #87ceeb)); } .flowitem:hover::before { opacity: 1; }
Comments
Post a Comment