This example demonstrates a simple code snippet:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}
.container {
animation: moves 5s ease 0s normal forwards;
/* transform: translate(-50vw, -50vh) translate(50%, 50%); */
}
@keyframes moves {
0% {
}
100%{
transform: translate(-50vw, -50vh) translate(50%, 50%);
}
} <div class="container">
hello
</div>When executed in Chrome, the element will move from the screen's middle to the top-left corner and remain there without shifting when the viewport size changes. However, in Firefox and Safari, resizing the viewport will cause the element to slide away. I am looking for a solution to address this issue. If I directly apply the translate property instead of using animation, the problem does not occur.
I prefer not to use left and top properties within the animation due to potential lag issues as discussed here.