Absolutely positioned element moves after animation completes - html

Question

it's been awhile. Anyway, having some trouble getting an absolutely positioned element to stay center while animating. What's more is I'm seeing the element "shift" after the animation is complete and I have no idea why. Closest issue I found was css animations moves element position but that didn't solve for this common use case.
Debugging the animation frames, we can see the following:
During animation
After animation
Yuck! Playing with positioning didn't work, but animation-fill-mode did something; however, I noticed translate has no effect on the positioned element during animation or when animation-fill-mode is set to forwards or both. Why? The side effect is when the animation completes the element's position will not be recalculated so no repaint.
Example:
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
and the CSS using animate.css to make life easy:
.alert {
min-width: 500px;
position: absolute;
top: 0;
left: 50%;
animation-name: fadeInDown;
animation-duration: 0.75s;
animation-timing-function: ease-in-out;
/* animation-fill-mode: forwards; */
transform: translateX(-50%);
}
Demo: https://codepen.io/atomicpages/pen/yrymVY?editors=1100
Goals:
Center aligned
Element is at least 500px
Element doesn't move after animation frame completes
Your help is appreciated.

Answer 1

Use custom fadeInDown without animate.css because it is using transform: translate3d(0, -100%, 0) in fadeIndown
.alert {
width: 500px;
top: 0;
left: 50%;
animation-name: fadeInDown;
animation-duration: 0.75s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
transform: translateX(-50%);
position:absolute;
}
#keyframes fadeInDown{
from{
opacity:0;
}
to{
opacity:1;
}
}
#-webkit-keyframes fadeInDown{
from{
opacity:0;
}
to{
opacity:1;
}
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>

Answer 2

Try removing transform: translateX, after the animation, the element stays where it is, and change it to left: 0;
.alert {
min-width: 500px;
top: 0;
left: 0;
animation-name: fadeInDown;
animation-duration: 0.75s;
animation-timing-function: ease-in-out;
}

Answer 3

The reason is that the built-in fadeInDown also use transform for its animation, hence resets/override your initial value, and restore it after, unless you use animation-fill-mode: forwards;, which will keep it 50% off the left edge all the time.
And do note, preset transform "values", like translateX doesn't persist when another "value" is added to the "property", all existing values gets overwritten.
Original CSS
#keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
For yours to work you need to override the built-in one, adding your translateX value to it, and it will behave.
And if you do, there is a prefixed #keyframes rule as well, which also need to be updated.
New CSS
#keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(-50%, -100%, 0);
transform: translate3d(-50%, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
}
}
As a side note:
With the provided setting it will always take full width and centering it would have no effect, unless you also gave it a max-width somewhere else.