css animations moves element position - css

Question

I have this problem with my CSS animation. I have an element position absolute centered in the middle of the page and when I put the animation on, it moves to the right and when the animation is finished it moves back to the middle of the page. Here's the code:
#keyframes motto
from
opacity: 0
transform: translate3d(0, -100%, 0)
to
opacity: 1
transform: none
#home
.motto
position: absolute
top: 50%
left: 50%
margin-right: -50%
transform: translate(-50%, -50%)
animation-name: motto
animation-duration: 2s
h1
margin: 0
font-size: 42px
font-weight: 100
opacity: .5
-webkit-animation-duration: 2s
Thx in advance!
#keyframes motto {
from {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
.motto {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
animation-name: motto;
animation-duration: 2s;
}
.motto h1 {
margin: 0;
font-size: 42px;
font-weight: 100;
opacity: .5
-webkit-animation-duration: 2s;
}
<div class="motto"><h1>css <span>animation</span></h1></div>

Answer 1

Use the following line in the CSS of .motto :
animation-fill-mode: forwards;
This sets the element to display as it is in the final frame of the animation.
#keyframes motto {
from {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
.motto {
position: absolute;
width: 400px;
left: 50%;
top: 50%;
margin-left: -200px;
animation-name: motto;
animation-duration: 2s;
animation-fill-mode: forwards;
}
.motto h1 {
margin: 0;
font-size: 42px;
font-weight: 100;
opacity: .5;
text-align: center;
}
<div class="motto"><h1>css <span>animation</span></h1></div>