如何让 css 流畅的全屏动画？

Question

这是我的css

html , body{
    height:100%;
    width:100%;
    overflow:hidden;
}
.screen-main{
    position:absolute;
    width:100%;
    height:100%;
    top:0%;
    left:0%;
    background-color:red;
}
.screen-login{
    position:absolute;
    width:100%;
    height:100%;
    top:0%;
    left:0%;
    background-color:green;
    -webkit-transform:translate3d(100%,0%,0px);
}
.screen-login-left{
    position:absolute;
    width:100%;
    height:100%;
    background-color:green;
    top:0%;
    left:0%;
    -webkit-transform:translate3d(0%,0%,0px);
    -webkit-animation:right-to-left 0.5s;
}
@-webkit-keyframes right-to-left{
    0%{ -webkit-transform:translate3d(100%,0%,0px); -webkit-animation-timing-function: ease-in;  }
    50%{ -webkit-transform:translate3d(50%,0%,0px); -webkit-animation-timing-function: ease-out;  }
    100%{ -webkit-transform:translate3d(0%,0%,0px); }
}

我的HTML::

<body>
    <div class="screen-main" >main <a id="to-login-btn">to login</a></div>
    <div class="screen-login" >login</div>
</body>

我的问题:: 这不是顺利过渡！

如何修复它们？一些技术可以帮助？我可以使用 left 或 transform:translate() 进行过渡吗？关于浏览器回流？（我不确定）

请帮帮我。非常感谢。

Answer 1

要使动画发生，您应该将动画 class 添加到任何元素

<body class="screen-login-left">
    <div class="screen-main">main <a id="to-login-btn">to login</a>
    </div>
    <div class="screen-login">login</div>
</body>

如果你想让它更流畅就提高动画速度

.screen-login-left {
    position:absolute;
    width:100%;
    height:100%;
    background-color:green;
    top:0%;
    left:0%;
    -webkit-transform:translate3d(0%, 0%, 0px);
    -webkit-animation:right-to-left 3s;
}

如何让 css 流畅的全屏动画？

how to make css animation smoothly for full-screen page?

html

css

jquery

animation

transition