这是我的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() 进行过渡吗？ 关于浏览器回流？(我不确定)
请帮帮我。非常感谢。
最佳答案
要使动画发生，您应该将动画类添加到任何元素
<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;
}
关于jquery - 如何为全屏页面制作流畅的css动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28019746/