I am currently working on an animation that changes the background-color and bottom position of an element. Everything seems to be functioning correctly except for the bottom transition in Microsoft Edge, where it changes instantly instead of transitioning smoothly.
I'm aware that using translate might solve this issue, but I'm curious if positioning with top, right, bottom, left does not work well with transitions in Microsoft browsers. It works flawlessly in Firefox, Chrome, and Safari.
Here is a snippet of my CSS:
.heading-bg{
display: table;
width: 100%;
margin-left: auto;
margin-right: auto;
position: absolute;
bottom: calc(50% - 30px);
-webkit-transition: bottom .5s ease-out, background-color .4s ease-out;
-moz-transition: bottom .5s ease-out, background-color .4s ease-out;
-ms-transition: bottom .5s ease-out, background-color .4s ease-out;
-o-transition: bottom .5s ease-out, background-color .4s ease-out;
transition: bottom .5s ease-out, background-color .4s ease-out;
}
.gallery-item:hover .heading-bg{
bottom: 0px;
background-color: rgba(0,0,0,0.7);
-webkit-transition: bottom .6s ease-out, background-color .4s ease-out;
-moz-transition: bottom .6s ease-out, background-color .4s ease-out;
-ms-transition: bottom .6s ease-out, background-color .4s ease-out;
-o-transition: bottom .6s ease-out, background-color .4s ease-out;
transition: bottom .6s ease-out, background-color .4s ease-out;
}
Here's how the markup looks:
<div class="gallery-item">
<a href="www.example.com">
<div class="gallery-item-inner">
<div class="heading-bg">
<h3>Gallery name</h3>
</div>
</div>
</a>
</div>
.gallery-item has a fixed height.